新手学习笔记

父组件向子组件传递属性的方法教程讲了, 使用this.props, 懒得说

从教程推断props是该组件的属性集合,

var Hello = React.createClass({
    render: function() {
        return(
        <div>
        hello, {this.props.name}
        </div>
        );
   }
});

React.render(
<Hello name = "Jack" />,
document.getElementById('box')
);

以上代码会输出"hello, Jack" , 不知道想法对不对反正能用,,

在父组件内添加子组件的时候给子组件添加属性, 能够添加一个函数,, 而后在子组件内使用this.props调用这个函数

使用传递参数的形式来传递值

var Box = React.createClass({
    //初始化属性
    getInitialState: function() {
        return{data: []};
    },
    //修改属性
    changed: function(news) {
        this.setState({data: news});
    },
    render: function() {
        return(
        <div>
        <Hello data = this.state.data change = {this.changed} />
        {this.state.data.length}
        </div>
        );
   }
});

var Hello = React.createClass({
    //点击的时候获取父组件的属性, 修改且上传
    onClick: function() {
        var news = this.props.data;
        news.push(0);
        this.props.change(news);
    },
    render: function() {
        return(
        <div className = "hello" onClick = {this.onClick}/>
        );
    }
});

上面的代码会在每次点击子组件时给父组件的data属性添加一个值, 最后要注意的一点是调用父组件的函数并非在当前组件内运行,,是在父组件内运行,,我也不知道缘由,,猜想是对函数进行了绑定