React.Children詳解及實現步驟條

阿新 • • 發佈：2021-06-23

官方：

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>

React.Children詳解及實現步驟條

官方： https://react.docschina.org/docs/react-api.html#reactcomponent 其他博主： React.Children提供了處理this.props.children的工具，this.props.children可以任何資料（元件、字串、函式等等）。

詳解Python實現進度條的4種方式

這裡只列舉了部分方法，其他方法或python庫暫時還沒使用到 1.不用庫，直接列印：

java 從零開始手寫 redis（11）clock時鐘淘汰演算法詳解及實現

前言 java從零手寫實現redis（一）如何實現固定大小的快取？ java從零手寫實現redis（三）redis expire 過期原理

從零開始手寫快取框架（12）redis expire 過期的隨機特性詳解及實現

前言 java從零手寫實現redis（一）如何實現固定大小的快取？ java從零手寫實現redis（二）redis expire 過期原理

高併發系統的限流詳解及實現

在開發高併發系統時有三把利器用來保護系統：快取、降級和限流。本文結合作者的一些經驗介紹限流的相關概念、演算法和常規的實現方式。

基於YUV 資料格式詳解及python實現方式

YUV 資料格式概覽 YUV 的原理是把亮度與色度分離，使用 Y、U、V 分別表示亮度，以及藍色通道與亮度的差值和紅色通道與亮度的差值。其中 Y 訊號分量除了表示亮度 (luma) 訊號外，還含有較多的綠色通道量，單純的 Y 分

vue相關配置檔案詳解及多環境配置詳細步驟

1.package.json 作用： package.json 檔案其實就是對專案或者模組包的描述，裡面包含許多元資訊。比如專案名稱，專案版本，專案執行入口檔案，專案貢獻者等等。npm install 命令會根據這個檔案下載所有依賴模組。

設計模式詳解及Python實現

設計模式及Python實現設計模式是什麼？ Christopher Alexander：“每一個模式描述了一個在我們周圍不斷重複發生的問題，以及該問題的解決方案的核心*。這樣你就能一次又一次地使用該方案而不必做重複勞動。”

【小白學PyTorch】12 SENet詳解及PyTorch實現

文章來自微信公眾號【機器學習煉丹術】。我是煉丹兄，有什麼問題都可以來找我交流，近期建立了微信交流群，也在朋友圈抽獎贈書十多本了。我的微信是cyx645016617，歡迎各位朋友。

JDBC利用事務處理實現簡單增刪改查的詳解及工具類的建立

技術標籤：技術學習 JDBC全稱為：Java Data Base Connectivity (java資料庫連線），主要用於java與資料庫的連結。

ES6 Promise詳解及原始碼實現

一.Promise是什麼？ Promise是一個建構函式，其例項用於描述非同步操作完成的狀態和結果。

工作流Activiti框架中的LDAP元件使用詳解！實現對工作流目錄資訊的分散式訪問及訪問控制

Activiti整合LDAP簡介企業在LDAP系統中儲存了使用者和群組資訊,Activiti提供了一種解決方案,通過簡單的配置就可以讓activit連線LDAP

Python之@property詳解及底層實現介紹

@property的介紹轉自：https://blog.csdn.net/weixin_42681866/article/details/83376484 前文 Python內建有三大裝飾器：@staticmethod(靜態方法)、@classmethod(類方法)、@property(描述符)，其中靜態方法就是定

Java 中的偽共享詳解及解決方案

1. 什麼是偽共享 CPU 快取系統中是以快取行（cache line）為單位儲存的。目前主流的 CPU Cache 的 Cache Line 大小都是 64 Bytes。在多執行緒情況下，如果需要修改“共享同一個快取行的變數”，就會無意中影響彼此的

python中的 zip函式詳解及用法舉例

python中zip()函式用法舉例定義：zip([iterable,...]) 　　zip()是Python的一個內建函式，它接受一系列可迭代的物件作為引數，將物件中對應的元素打包成一個個tuple（元組），然後返回由這些tuples組成的list（列表

基於Android FileProvider 屬性配置詳解及FileProvider多節點問題

眾所周知在android7.0，修改了對私有儲存的限制，導致在獲取資源的時候，不能通過Uri.fromFile來獲取uri了我們需要適配7.0+的機型需要這樣寫：

詳解Python 實現 ZeroMQ 的三種基本工作模式

簡介引用官方說法：ZMQ（以下 ZeroMQ 簡稱 ZMQ）是一個簡單好用的傳輸層，像框架一樣的一個 socket library，他使得 Socket 程式設計更加簡單、簡潔和效能更高。

JS陣列reduce()方法詳解及高階技巧

JS陣列reduce()方法詳解及高階技巧 reduce()方法可以搞定的東西，for迴圈，或者forEach方法有時候也可以搞定，那為啥要用reduce()？這個問題，之前我也想過，要說原因還真找不到，唯一能找到的是：通往成功的道路有

JS陣列reduce()方法詳解及高階技巧【轉】

轉https://www.jianshu.com/p/e375ba1cfc47 1、語法 arr.reduce(callback,[initialValue]) reduce 為陣列中的每一個元素依次執行回撥函式，不包括陣列中被刪除或從未被賦值的元素，接受四個引數：初始值（或者上一

C++中類繼承public，protected和private關鍵字作用詳解及派生類的訪問許可權

注意：本文有時候會用Visual Studio Code裡外掛的自動補全功能來展示訪問許可權的範圍（當且僅當自動補全範圍等價於物件訪問許可權範圍的時候），但是不代表只要是出現在自動補全範圍內的可呼叫物件/成員都是合法的。

React.Children詳解 及實現步驟條

React.Children.map （ 用於 遍歷 this.props.children 中的所有子節點 有 return 返回 ）

React.Children.forEach（ 用於 遍歷 this.props.children 中的所有子節點 無 return 返回 ）

React.Children.count( 用於 求和 )

React.Children.only （ 用於判斷是否只有一個子節點 ）

React.Children.toArray ( 用於排序 )

相關推薦

React.Children詳解及實現步驟條

　　`React.Children.map （用於遍歷 this.props.children 中的所有子節點有 return 返回）`

　　`React.Children.forEach（用於遍歷 this.props.children 中的所有子節點無 return 返回）`

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

　　`React.Children.only （用於判斷是否只有一個子節點）`

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