React学习笔记(三) 组件传值

时间：2024-07-16 17:37:44

组件嵌套后，父组件怎么向子组件发送数据呢？

答案是： this.props

    <script type="text/babel">
        var MyFirst = React.createClass({
            getInitialState : function(){
                return {
                    myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',]
                }
            },
            render : function(){
                return (
                    <div>
                        <h3>父组件</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}>我的消息{key}:{value}</p>
                    )
                })
                return (
                    <div>
                        {msg}
                    </div>
                )
            }
        })
        var haFirst = ReactDOM.render(
            <MyFirst />,
            document.getElementById("test"),
            function(){
                console.log('编译完成!');
            }
        )
    </script>

有的时候父组件传过来的数据类型跟子组件需要的类型不一样，那该怎么办呢？

PropTypes属性，就是用来验证组件实例的属性是否符合要求

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

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

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

　　

若属性不符合要求此外，我们可以用getDefaultProps 方法可以用来设置组件属性的默认值

    <script type="text/babel">
        var MyFirst = React.createClass({
            getInitialState : function(){
                return {
                    myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',]
                }
            },
            render : function(){
                return (
                    <div>
                        <h3>父组件</h3>
                        <MySecond />
                    </div>
                )
            }
        });
        var MySecond = React.createClass({
            getDefaultProps  : function(){　　　　//设置默认值
                return {
                    name : [,,]
                }
            },
            PropTypes : {　　　　　　　　　　　　　　//定义变量的类型：数组且必须
                name : React.PropTypes.array.isRequired
            },
            render : function(){
                var msg = [];
                var message = this.props.name;
                message.forEach(function(value,key){
                    msg.push(
                        <p key={key}>我的消息{key}:{value}</p>
                    )
                })
                return (
                    <div>
                        {msg}
                    </div>
                )
            }
        })
        var haFirst = ReactDOM.render(
            <MyFirst />,
            document.getElementById("test"),
            function(){
                console.log('编译完成!');
            }
        )
    </script>

如上：父组件如果没有给子组件传值，或者传值的类型不对，子组件将自动调用默认值1,2,3

PS:当你在写react的时候报了类似于这样子的错：Each child in an array or iterator should have a unique “key” prop.

解决办法只要在循环的每个子项添加一个key就行了，代码如下：

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
    <div>
        {
          names.map(function (name, key) {
            return <div key={key}>Hello, {name}!</div>
          })
        }
    </div>,
    document.getElementById('example')
);

相关文章