React study Notes (iii) component transfer value

After a component is nested, how does the parent component send data to the child component?

The answer is: this.props

<script type = "text / babel">
        var MyFirst = React.createClass ({
            getInitialState: function () {
                return {
                    myMessage: [‘I am the parent component data1’, ’I ’m the parent component data2’, ’I ’m the parent component data3’,]
                }
            },
            render: function () {
                return (
                    <div>
                        <h3> Parent component </ h3>
                        <MySecond name = {this.state.myMessage} />
                    </ div>
                )
            }
        });
        var MySecond = React.createClass ({
            render: function () {
                var msg = [];
                var message = this.props.name;
                message.forEach (function (value, key) {
                    msg.push (
                        <p key = {key}> My message {key}: {value} </ p>
                    )
                })
                return (
                    <div>
                        {msg}
                    </ div>
                )
            }
        })
        var haFirst = ReactDOM.render (
            <MyFirst />,
            document.getElementById ("test"),
            function () {
                console.log (‘Compilation is complete!’);
            }
        )
    </ script>

What happens when a parent component passes a different type of data than a child component needs?

The Proptypes property is used to verify that the properties of the component instance meet the requirements

 
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() { return <h1> {this.props.title} </h1>;
   }
});

There are many types of proptypes:

React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string
React.PropTypes.node        
React.PropTypes.element

If the property does not meet the requirements, we can use the Getdefaultprops method to set the default value of the component properties.

<script type = "text / babel">
        var MyFirst = React.createClass ({
            getInitialState: function () {
                return {
                    myMessage: [‘I am the parent component data1’, ’I ’m the parent component data2’, ’I ’m the parent component data3’,]
                }
            },
            render: function () {
                return (
                    <div>
                        <h3> Parent component </ h3>
                        <MySecond />
                    </ div>
                )
            }
        });
        var MySecond = React.createClass ({
            getDefaultProps: function () {// Set the default value
                return {
                    name: [1,2,3]
                }
            },
            PropTypes: {// Define variable types: array and must
                name: React.PropTypes.array.isRequired
            },
            render: function () {
                var msg = [];
                var message = this.props.name;
                message.forEach (function (value, key) {
                    msg.push (
                        <p key = {key}> My message {key}: {value} </ p>
                    )
                })
                return (
                    <div>
                        {msg}
                    </ div>
                )
            }
        })
        var haFirst = ReactDOM.render (
            <MyFirst />,
            document.getElementById ("test"),
            function () {
                console.log (‘Compilation is complete!’);
            }
        )
    </ script>

As above: If the parent component does not pass a value to a subassembly, or if the value is of the wrong type, the child component will automatically call the default value of

PS: When you write react, you report a similar error: Each child in an array or iterator should has a unique "key" prop.

Workaround just add a key to each subkey in the loop and the code is as follows:

var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];
 
ReactDOM.render( <div> {
          names.map(function (name, key) { return <div key={key}>Hello, {name}!</div> })
        } </div>,
    document.getElementById(‘example‘)
);

React study Notes (iii) component transfer value