javascript - ReactJS Props 和冒泡

Question

我很难理解为什么我不能做这样的事情。

loadPostsFromServer: function() {
    $.ajax({
        url: '/allPosts',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            this.setState({posts:data, items:data});
            //this.setState({items:data});
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url,status, err.toString());
        }.bind(this)
    });
},

loadUserFromServer: function() {
    $.ajax({
        url: '/user',
        dataType: 'json',
        success: function(data) {
            this.setState({user:data.local});
            //console.log(this.state.user);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url,status, err.toString());
        }.bind(this)
    });
},

getInitialState: function() {
   return {
      posts: [],
      items: [],
      user:  []
   }
},

componentDidMount: function() {
    this.loadPostsFromServer();
    this.loadUserFromServer();

    //this.setState({items: this.state.posts}); 
    //setInterval(this.loadPostsFromServer, this.props.pollInterval);
},

render: function() {
    <div className="Posts">
        <List user={this.state.user} posts={this.state.items} />
    </div>
}

Where List 可以是这样的，并且不能执行 this.props.user 打印

var List = React.createClass({ //has to be called list
    render: function() {
        return (
            <p>{this.props.user}</p>
            <ul>
            {
                this.props.posts.map(post){
                    return (<p>{post.title}</p>)
                })
            }
            </ul>
        )
    }
});

但可以这样做:

var List = React.createClass({
    render: function() {
        return (<p>{this.props.user}</p>)
    }
});

基本上，我在实际函数中传递了两个 props，并且 ajax 调用传递了一个带有用户信息的数组 user 和带有 post 信息的数组 post。我可以很好地显示帖子信息，并且用户信息也很完整，但是我实际上无法显示从 ajax get 调用收到的用户信息。我还打印了数组的状态，它是完整且填充的。然而，它会返回诸如无法读取 {this.props.user.firstName} 之类的消息，但是以第二种方式编写并且不包括帖子，它工作得很好。如何在 map 函数中使用这两个 Prop ？

Answer 1

要小心，在渲染函数中，你总是需要一个换行标签来使React工作。您应该添加<div>标记为render的List组件。

var List = React.createClass({ //has to be called list
render: function() {
    return (
       <div> <-- ALWAYS HAS A WRAP TAG
        <p>{this.props.user}</p>
        <ul>
        {
            this.props.posts.map(post){
                return (<p>{post.title}</p>)
            })
        }
        </ul>

       </div>
    )
}
});

下面的代码之所以有效，是因为有 <p>包裹内容。

var List = React.createClass({
render: function() {
    return (<p> <-- WRAP TAG
          {this.props.user}
          </p>)
}
});