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!