Webpack + React Development Props

The use of components in react is exactly the same as native HTML tags, and can be arbitrarily added to attributes, such as

class className ,the reserved word for thehtmlforclassforJavaScript .

This.props.children

The properties of the This.props object correspond to the component's property one by one, but with one exception, the This.props.children property. It represents all child nodes of the component;

var Noteslist = React.createclass ({  function() {    return  (       <ol>      {        React.Children.map (thisfunction  (child) {           return <li>{child}</li>; }       )      </ol>);}  ); Render (  <NotesList>    <span>hello</span>    <span>world</span>  </noteslist>,  document.getElementById (' Testdiv '));

The contents of the DOM node after rendering are as follows:

<olData-reactroot="">    <Li><span>Hello</span></Li>    <Li><span>World</span></Li></ol>

Among them nodelist can also be changed to write:

var noteslist = React.createclass ({  render:function () {    return (      <ol  >      {          (this.props.children). Map ((child, index) = =              {<  Key ={index} > {Child} </ Li > ;          })      }       </ ol >     );  }});

It is important to note that it is best to add a key property to the Li tag, which react recommends.

It's possibile to minimize possible DOM changes.

If you do not add a key, the following warning message is reported:

Each child in an array or iterator should has a unique "key" prop.

Reference from StackOverflow

The Notelist component of the above code has two span sub-nodes, all of which can be read by This.props.children;

It is important to note that there are three possible values for This.props.children: If the current component has no child nodes, it is undefined; if there is a child node, the data type is object, and if there are multiple child nodes, the data type is array. So be careful when dealing with This.props.children.
React provides a tool method React.children to handle This.props.children. We can use React.Children.map to traverse the child nodes without worrying about whether the This.props.children data type is undefined or object. For more React.children methods, please refer to the official documentation.

Protypes

A component's properties can accept any value, such as strings, objects, functions, and so on. Sometimes, we need a mechanism to verify that when someone uses a component, the supplied parameters meet the requirements. The Proptypes property of the component class is used to verify that the properties of the component instance meet the requirements

class MyTitle extends React.component {    proptypes () {        return  {            title: React.PropTypes.string.isRequired        };    }    Render () {        return (<div> {this. props.title} </div>);}    }

can also use Createclass way, and above a little difference;

    var MyTitle = React.createclass ({      proptypes: {        title:React.PropTypes.string.isRequired,      },       function() {         return this. Props.title} 
       }    });

The MyTitle component has a title property. Proptypes tells React that the title property is required, and that its value must be a string, and if it is set to a different type value, an error occurs.

In addition, getDefaultProps methods can be used to set default values for component properties.

var MyTitle = React.createclass ({  function  () {    return  {      ') Hello world '    }  ,function() {     return this. Props.title}    }});

... this.props

The props of a component is a property set to a specific component <componenta name= ' CCF ' >im</componenta> a component like this has a Name property and a children property. Where children is the string ' IM ';

When defining components, you can pass ... this.props

var Inner = React.createclass ({    render:function () {        return <div {... this .props}></div>    }}); //  ... <inner age=">ABCDE</Inner>//

More proptypes Reference official documentation.

Webpack + React Development Props