Home > Web Front-end > Front-end Q&A > How to use react children method

How to use react children method

藏色散人
Release: 2023-01-04 16:41:59
Original
2316 people have browsed it

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().

How to use react children method

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>
Copy after login
  • 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>
Copy after login
  • 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>
Copy after login
  • 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
Copy after login
## when sorting children #If you don’t use the React.Children.toArray() method and write children.sort() directly, an error will be reported

How to use react children method

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

Steps.jsx

import * as React from &#39;react&#39;;
import &#39;./step.less&#39;;
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};
Copy after login

steps.less

.indicator { display: inline-block; width: 100px; height: 20px; margin-right: 10px; margin-top: 200px; background: #f3f3f3; &.active {
    background: orange;
  }
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template