Detailed usage of React.Children

Detailed usage of React.Children

React.Children is one of the top-level APIs that provides useful tools for working with the enclosed data structure of this.props.children .

The properties of the this.props object correspond one-to-one to the properties of the component, with one exception: the this.props.children property. It represents all the child nodes of the component.

1. React.Children.map

object React.Children.map(object children, function fn [, object context])
 
Directions:
React.Children.map(this.props.children, function (child) {
  return <li>{child}</li>;
})
Other methods this.props.children.forEach(function (child) {
  return <li>{child}</li>
})

Calls the fn function on each immediate child (contained in the children parameter) with this referring to the context. If children is a nested object or array, it will be iterated over: no container object will be passed to fn. If the children parameter is null or undefined, then null or undefined is returned instead of an empty object.

<script type="text/jsx">
 var NotesList = React.createClass({
  render: function() {
   return (
    <ol>
     {
      React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
     }
    </ol>
   );
  }
 });
 
 React.render(
  <NotesList>
   <span>hello</span>
   <span>hello</span>
  </NotesList>,
  document.body
 );
</script>

It should be noted here that there are three possible values ​​for this.props.children : if the current component has no child nodes, it is undefined ; if there is one child node, the data type is object ; if there are multiple child nodes, the data type is array . So, be careful when handling this.props.children .

React provides a utility method React.Children to handle this.props.children . We can use React.Children.map to iterate over child nodes without worrying about whether the data type of this.props.children is undefined or object .

Pass in the following ReactElement:

<NotesList>
  <span>hello</span>
  <span>hello</span>
</NotesList>
//Return two child nodes <NotesList></NotesList>
//Return undefined
 
 
<NotesList>null</NotesList>
//Return null

2. React.Children.forEach

React.Children.forEach(object children, function fn [, object context])

Similar to React.Children.map(), but does not return an object.

3. React.Children.count

number React.Children.count(object children)

Returns the total number of components in children, which corresponds to the number of invocations of the callback function passed to map or forEach.

render: function() {
  console.log(React.Children.count(this.props.children)); //2
 
  return (
   <ol>
    {
     this.props.children.forEach(function (child) {
       return <li>{child}</li>
     })
    }
   </ol>
  );
 }

Different ReactElements output count values:

<NotesList>
  <span>hello</span>
  <span>hello</span>
</NotesList>
console.log(React.Children.count(this.props.children)); //2
 
<NotesList></NotesList>
console.log(React.Children.count(this.props.children)); //0
 
<NotesList>null</NotesList>
console.log(React.Children.count(this.props.children)); //1

4. React.Children.only

object React.Children.only(object children)

Returns the only child in children. Otherwise throw an exception.

The only child here, the only method can only accept a single object as a parameter, not multiple objects (arrays).

console.log(React.Children.only(this.props.children[0])); 
//Output object this.props.children[0]

The above is the detailed content of the detailed explanation of the usage of React.Children. For more information about the usage of React.Children, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • React Hooks Usage Examples
  • In-depth understanding of the core principles of React Native (Bridge of React Native)
  • React+Koa example of implementing file upload
  • Example code for developing h5 form page based on react hooks and zarm component library configuration
  • React antd tabs switching causes repeated refresh of subcomponents
  • ReactJs Basics Tutorial - Essential Edition
  • ReactRouter implementation
  • Detailed explanation of the use of React.cloneElement

<<:  How to prohibit vsftpd users from logging in through ssh

>>:  MySQL 5.5.56 version (binary package installation) custom installation path step record

Recommend

Record a troubleshooting record of high CPU usage of Tomcat process

This article mainly records a tomcat process, and...

Summary of Mysql slow query operations

Mysql slow query explanation The MySQL slow query...

Use CSS to easily implement some frequently appearing weird buttons

background In the group, some students will ask r...

How to choose the right index in MySQL

Let’s take a look at a chestnut first EXPLAIN sel...

vue+el-upload realizes dynamic upload of multiple files

vue+el-upload multiple files dynamic upload, for ...

Detailed explanation of Kubernetes pod orchestration and lifecycle

Table of contents K8S Master Basic Architecture P...

Detailed steps for installing and debugging MySQL database on CentOS7 [Example]

This example requires downloading and installing ...

Use scripts to package and upload Docker images with one click

The author has been working on a micro-frontend p...

HTML page common style (recommended)

As shown below: XML/HTML CodeCopy content to clip...

HTML+CSS+JS to implement the Don't Step on the Whiteboard game

Table of contents Background 1. Thought Analysis ...

Summary of common commands for Linux user and group management

This article summarizes the common commands for L...

Detailed explanation of data types in JavaScript basics

Table of contents 1. Data Type 1.1 Why do we need...

Explanation of the execution priority of mySQL keywords

As shown below: from table where condition group ...