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>
}

其中 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>)
    }
});

基本上我在我的真实函数中传递了两个道具，ajax 调用传递了一个数组用户，带有用户信息，数组 post 带有 post 信息.我可以很好地显示 post 信息，并且用户信息也很完整，但是我实际上无法显示从 ajax get 调用收到的用户信息。我也打印出数组的状态，它是完整的和填充的。然而，它会传递 return 消息，例如无法读取 {this.props.user.firstName} 等，但是以第二种方式写入它并且不包括 posts，它工作正常。如何在地图功能中同时使用这两个道具？

Answer 1

注意，在 render 函数中，你总是需要一个 wrap 标签来让 React 工作。您应该将 <div> 标记添加到 List 组件的 render。

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>)
}
});

ReactJS Props 和冒泡

ReactJS Props and bubbling

javascript

jquery

ajax

reactjs

react-jsx