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(={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(, 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>Documenttitle>
  <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()
    //       }
    //     return (list)
    //   }
    // }

    // class Step extends React.Component {
    //   constructor (props) {
    //     super(props)
    //   }
    //   render () {
    //     const { currentStep, index } = this.props
    //     return (
    //       
= index ? ' active' : ''}`} />
    //     )
    //   }
    // }
    
    // 方法二
    // function App() {
    //   return (
    //     

    //       
    //         
    //         
    //         
    //       
    //     

    //   );
    // }
    // function Steps({currentStep, children}) {
    //   return (
    //     

    //       {React.Children.map(children, (child, index) => {
    //         return React.cloneElement(child, {
    //           index: index,
    //           currentStep: currentStep
    //         });
    //       })}
    // 　　

    //   );
    // }

    // function Step({index, currentStep}) {
    //   return 
= 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;
  width: 100px;
  height: 20px;
  margin-right: 10px;
  margin-top: 100px;
  background: #f3f3f3;
}
.active {
  background: orange;
}
react

相关

react dom移动算法

React组件重构：嵌套+继承 与 高阶组件

React中嵌套组件与被嵌套组件的通信

AntDesign(React)学习-15 组件定义、connect、interface

初学ReactJS，写了一个RadioButtonList组件

快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）

react传值名称使用value可能出现死循环

React Native bind函数

React Native constructor方法内外this的区别

使用 create-react-app 创建基于 ts 项目

react源码解析17.context

react源码解析14.手写hooks

标签