【学】React的学习之旅5-组件的嵌套

• 复习 [array].map(function(item,index){})方法，传参里的函数需要有return值，一般用map()后都要用一个变量接一下，这个返回的还是一个数组，只是把每次遍历到的数组中的某一项调用函数进行处理里再放入新数组，就是那个变量的对应位置;这里用数组的for循环遍历其实很不方便，因为数组中每一项都是一个对象，所以用map()方法就非常方便
• 使用迭代器，比如map()方法时，要给每个遍历到后返回的元素添加一个唯一的key值，否则，原来的版本会有警告，而现在的版本会直接报错react.js:18794 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of CommentList. See https://fb.me/react-warning-keys for more information. 解决方法是给Comment标签一个key值，附上每个元素的index
• 得到新的commentsNode其实是一个数组，数组中每个都是一个React的组件对象，所以这个数组可以直接插入到return函数里的div中
• 通过constructor()的方式来设置组件的初始化状态，通过给this.state直接赋值一个对象的方式，但是在这之前需要写super();老版本不写这句话没关系，但是在babel中，需要加上这句继承父级的属性后，才能写自己的属性

var oWrap = document.getElementById('wrap');

class Comment extends React.Component {
    render(){
        return (
            <div>
                <div className="comment-body">
                    {this.props.children}
                </div>
                <div className="comment-author">
                    -{this.props.author}
                </div>
            </div>
        );
    }
}

class CommentForm extends React.Component {
    render(){
        return (
            <div>
                CommentForm
            </div>
        )
    };
}
//var comments = [
//    {author:'Victor',content:'This is my comment111!'},
//    {author:'Mary',content:'This is my comment222!'},
//    {author:'Qingyu',content:'This is my comment333!'}
//];

class CommentList extends React.Component {
    render(){
        var commentsNode = this.props.comments.map(function(item,index){
            return <Comment key={'comment-'+index} author={item.author}>{item.content}</Comment>
        });
        
        //1). 复习 [array].map(function(item,index){})方法，
        //2). 使用迭代器，比如map()方法时，要给每个遍历到后返回的元素添加一个唯一的key值，解决方法是给Comment标签一个key值，附上每个元素的index
        //3). 得到新的commentsNode其实是一个数组，数组中每个都是一个React的组件对象，所以这个数组可以直接插入到return函数里的div中
        
        return (
            <div>
                {commentsNode}
            </div>
        );
    };
}

class CommentBox extends React.Component {

    constructor(){ //通过constructor()的方式来设置组件的初始化状态，
        super();//在babel中，需要加上这句继承父级的属性后，才能写自己的属性
        this.state = {
            comments:[] //初始化时comments为空数组，程序最后会调用一次setState来让它等于那个全局变量的comments数组，从而把它传递给子组件CommentList的comments属性中，一旦这个属性被赋予了一个数组，我们就可以用map来遍历，当然实际运用中我们会用ajax的方式获取数据后赋给这个数组
        };
    }

    render(){
        return (
                //让CommentList的comments属性根据组件对象的state中comments的变化而变化，而同时CommentsList组件在上面已经写了，props的comments的变动有会和CommentList里读取数据处理后渲染后输出commentsNode
            <div>
                <h1>Comment Box!!!</h1>
                <CommentList comments={this.state.comments} />
                <CommentForm />
            </div>
        );
    }
}

var box = ReactDOM.render(
    <CommentBox />,
    oWrap
);
//其实这时的box就是一个CommentBox组件对象,里面的state也是一个对象，我们可以通过setState来设置box，也就是CommentBox组件对象实例的状态，状态中的comments被赋值comments那个全局数组
box.setState({
    comments:comments
})
console.log(box)