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.mapobject 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 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.forEachReact.Children.forEach(object children, function fn [, object context]) Similar to React.Children.map(), but does not return an object. 3. React.Children.count
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
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:
|
<<: How to prohibit vsftpd users from logging in through ssh
>>: MySQL 5.5.56 version (binary package installation) custom installation path step record
Environment Introduction Operating system: centos...
MySQL provides two different versions for differe...
The mobile version of the website should at least...
Calculation of the box model <br />Margin + ...
Kubernetes supports three types of authentication...
This article mainly records a tomcat process, and...
To solve the problem that Deepin cannot start Goo...
If you want to wrap the text in the textarea input...
MySQL Boolean value, stores false or true In shor...
How to write transparent CSS for images using filt...
This article shares the installation and configur...
After this roll call device starts calling the ro...
Use Javascript to implement a message board examp...
Preface Let me explain here first. Many people on...
I was recently working on a project at the compan...