How to use react children method

The react children method is used to process "this.props.children". Its processing methods are: 1. React.Children.map(); 2. React.Children.forEach(); 3. React.Children .count(); 4. React.Children.only(); 5. React.Children.toArray().

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to use the react children method?

Detailed explanation of React.Children

React.Children provides tools for processing this.props.children, this.props.children can be any data (component, strings, functions, etc.). React.children has 5 methods: React.Children.map(), React.Children.forEach(), React.Children.count(), React.Children.only(), React.Children.toArray(), usually with React.cloneElement() is used in conjunction with this.props.children.

• React.Children.map()

React.Children.map() is somewhat similar to Array.prototype.map(). This method returns an array if children is an array, or null or undefined if it is null or undefined. The first parameter is children, which is the 'hello world!' and () =>

2333

functions in the Father component in the example. The second parameter is function. The first parameter of function is each item traversed, and the second parameter is the corresponding index.

function Father({children}) {
    return(
      <div>
      {React.Children.map(children, (child, index) => {
          ...
      })}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>

• React.Children.forEach()

Same as React.Children.map(), the difference is that there is no return.

• React.Children.count()

React.Children.count() is used to count and return the number of children. Do not use children.length to count. If there is only 'hello world!' in the Father component, 12 will be returned, which is obviously an incorrect result.

function Father({children}) {
    return(
      <div>
      {React.Children.count(children)}
      </div>    
    )        
 }
<Father>
    hello world!
    {() => <p>2333</p>}
</Father>

• React.Children.only()

Verify that there is only one child in children and return him. Otherwise this method throws an error.

function Father({children}) {
    return(
      <div>
      {React.Children.only(children)}
      </div>    
    )        
 }
<Father>
    hello world!
</Father>

• React.Children.toArray()

Convert children to Array, you need to use

function Father({children}) {
    let children1 = React.Children.toArray(children);
    return(
      <div>
      {children1.sort().join(&#39; &#39;)}
      </div>    
    )        
 }
<Father>
    {&#39;ccc&#39;}
    {&#39;aaa&#39;}
    {&#39;bbb&#39;}
</Father>
//渲染结果： aaa bbb ccc

## when sorting children #If you don’t use the React.Children.toArray() method and write children.sort() directly, an error will be reported

Example:

For example, if there is such a requirement , it takes 3 steps to complete an operation. Each time a step is completed, the corresponding indicator light will light up.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Steps, Step} from './Steps';
function App() {
    return (
        <div>
        <Steps currentStep={1}>  //完成相应的步骤，改变currentStep的值。如，完成第一步currentStep赋值为1，完成第二部赋值为2
            <Step />
            <Step />
            <Step />
            </Steps>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));

Steps.jsx

import * as React from 'react';
import './step.less';
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}: any) {
    return <div className={`indicator${currentStep >= index + 1 ? &#39; active&#39; : &#39;&#39;}`} />;
}
export {Steps, Step};

steps.less

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

Recommended learning: "

react video tutorial"

The above is the detailed content of How to use react children method. For more information, please follow other related articles on the PHP Chinese website!