React.Children详解及实现步骤条

官方：

https://react.docschina.org/docs/react-api.html#reactcomponent

其他博主：

React.Children提供了处理this.props.children的工具，this.props.children可以任何数据（组件、字符串、函数等等）。

React.children有5个方法：

React.Children.map()，

React.Children.forEach()、

React.Children.count()、

React.Children.only()、

React.Children.toArray()，

通常与 React.cloneElement() 结合使用来操作this.props.children。

React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法。

　　`React.Children.map （用于遍历 this.props.children 中的所有子节点有 return 返回）`

　　　　https://react.docschina.org/docs/react-api.html#reactchildrenmap

　　`React.Children.forEach` `（用于遍历 this.props.children 中的所有子节点无 return 返回）`

　　　　https://react.docschina.org/docs/react-api.html#reactchildrenforeach

　　`React.Children.count` `( 用于求和 )`

　　　　https://react.docschina.org/docs/react-api.html#reactchildrencount

　　`React.Children.only （用于判断是否只有一个子节点）`

　　　　https://react.docschina.org/docs/react-api.html#reactchildrenonly

　　`React.Children.toArray ( 用于排序 )`

　　　　https://react.docschina.org/docs/react-api.html#reactchildrentoarray

实现步骤条

方法一：类组件且不用 React.children ( 只是写出来而且 )

class App extends React.Component {
      render () {
        const currentStep = 1
        const list = []
        for(var i = 1; i <= 3; i++){
            list.push(<Step currentStep={currentStep} index={i} key={i}/>)
          }
        return (list)
      }
    }

    class Step extends React.Component {
      constructor (props) {
        super(props)
      }
      render () {
        const { currentStep, index } = this.props
        return (
          <div className={`indicator${currentStep >= index ? ' active' : ''}`} />
        )
      }
    }
ReactDOM.render(<App />, document.getElementById('app'));

方法二：类组件且用 React.children

class App extends React.Component {
      render () {
        return (
          <div>
            <Steps currentStep={2}>
              <Step />
              <Step />
              <Step />
            </Steps>
          </div>
        )
      }
    }
    class Steps extends React.Component {
      render () {
        const { currentStep, children } = this.props
        return (
          <div>
            {React.Children.map(children, (child, index) => {
              return React.cloneElement(child, {
                index: index,
                currentStep: currentStep
              });
            })}
      　　</div>
        )
      }
    }

    class Step extends React.Component {
      render () {
        const { currentStep, index } = this.props
        return <div className={`indicator${currentStep >= index + 1 ? ' active' : ''}`} />;
      }
    }

    ReactDOM.render(<App />, document.getElementById('app'));

方法三：函数组件且用 React.children

function App() {
      return (
        <div>
          <Steps currentStep={2}>
            <Step />
            <Step />
            <Step />
          </Steps>
        </div>
      );
    }
    function Steps({currentStep, children}) {
      return (
        <div>
          {React.Children.map(children, (child, index) => {
            return React.cloneElement(child, {
              index: index,
              currentStep: currentStep
            });
          })}
    　　</div>
      );
    }

    function Step({index, currentStep}) {
      return <div className={`indicator${currentStep >= index + 1 ? ' active' : ''}`} />;
    }

ReactDOM.render(<App />, document.getElementById('app'));

参考

https://www.cnblogs.com/chen-cong/p/10371329.html

https://zhuanlan.zhihu.com/p/115344190

赠人玫瑰手有余香

完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./1.css">
</head>
 
<body>
  <div id="app"></div>
</body>
</html>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
  <script type="text/babel"> // 使用jsx语法

    // 方法一
    // class App extends React.Component {
    //   render () {
    //     const currentStep = 1
    //     const list = []
    //     for(var i = 1; i <= 3; i++){
    //         list.push(<Step currentStep={currentStep} index={i} key={i}/>)
    //       }
    //     return (list)
    //   }
    // }

    // class Step extends React.Component {
    //   constructor (props) {
    //     super(props)
    //   }
    //   render () {
    //     const { currentStep, index } = this.props
    //     return (
    //       <div className={`indicator${currentStep >= index ? ' active' : ''}`} />
    //     )
    //   }
    // }
    
    // 方法二
    // function App() {
    //   return (
    //     <div>
    //       <Steps currentStep={2}>
    //         <Step />
    //         <Step />
    //         <Step />
    //       </Steps>
    //     </div>
    //   );
    // }
    // function Steps({currentStep, children}) {
    //   return (
    //     <div>
    //       {React.Children.map(children, (child, index) => {
    //         return React.cloneElement(child, {
    //           index: index,
    //           currentStep: currentStep
    //         });
    //       })}
    // 　　</div>
    //   );
    // }

    // function Step({index, currentStep}) {
    //   return <div className={`indicator${currentStep >= index + 1 ? ' active' : ''}`} />;
    // }

    // 方法三
    class App extends React.Component {
      render () {
        return (
          <div>
            <Steps currentStep={2}>
              <Step />
              <Step />
              <Step />
            </Steps>
          </div>
        )
      }
    }
    class Steps extends React.Component {
      render () {
        const { currentStep, children } = this.props
        return (
          <div>
            {React.Children.map(children, (child, index) => {
              return React.cloneElement(child, {
                index: index,
                currentStep: currentStep
              });
            })}
      　　</div>
        )
      }
    }

    class Step extends React.Component {
      render () {
        const { currentStep, index } = this.props
        return <div className={`indicator${currentStep >= index + 1 ? ' active' : ''}`} />;
      }
    }

    ReactDOM.render(<App />, document.getElementById('app'));
  </script>

css

.indicator {
  display: inline-block;
   100px;
  height: 20px;
  margin-right: 10px;
  margin-top: 100px;
  background: #f3f3f3;
}
.active {
  background: orange;
}