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

Detailed process of zabbix monitoring process and port through agent

Environment Introduction Operating system: centos...

MySQL 5.7.10 installation and configuration tutorial under Windows

MySQL provides two different versions for differe...

Some conclusions on developing mobile websites

The mobile version of the website should at least...

Summary of experience in using div box model

Calculation of the box model <br />Margin + ...

Introduction to generating Kubernetes certificates using OpenSSL

Kubernetes supports three types of authentication...

Record a troubleshooting record of high CPU usage of Tomcat process

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

How to implement line breaks in textarea text input area

If you want to wrap the text in the textarea input...

How to store false or true in MySQL

MySQL Boolean value, stores false or true In shor...

How to write transparent CSS for images using filters

How to write transparent CSS for images using filt...

Example code for implementing random roll caller in html

After this roll call device starts calling the ro...

JavaScript to achieve a simple message board case

Use Javascript to implement a message board examp...

Practical record of optimizing MySQL tables with tens of millions of data

Preface Let me explain here first. Many people on...

MySQL cleverly uses sum, case and when to optimize statistical queries

I was recently working on a project at the compan...