Reactjs 使用React.js呈现子组件错误

Reactjs 使用React.js呈现子组件错误,reactjs,Reactjs,我正在关注Facebook上的React.js。 我在这里添加了一个更像按钮的组件: var LikeButton = React.createClass({ getInitialState: function() { return {liked: this.props.liked, id: this.props.id}; }, handleClick: function(event) { // post to server using ajax here this.setState

我正在关注Facebook上的React.js。 我在这里添加了一个更像按钮的组件:

var LikeButton = React.createClass({
getInitialState: function() {
  return {liked: this.props.liked, id: this.props.id};
},
handleClick: function(event) {
  // post to server using ajax here
  this.setState({liked: !this.state.liked, id: this.prop.id});
},
render: function() {
var text = this.state.liked ? 'like' : 'unlike';
return (
  <p onClick={this.handleClick}>
    You {text} this. Click to toggle.
  </p>
);
}});
var LikeButton=React.createClass({
getInitialState:函数(){
返回{liked:this.props.liked,id:this.props.id};
},
handleClick:函数(事件){
//在此处使用ajax发布到服务器
this.setState({liked:!this.state.liked,id:this.prop.id});
},
render:function(){
var text=this.state.liked?'like':'inspect';
返回(

您可以{text}此选项。单击可切换。

); }});
然后我将组件放在注释块中:

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return <div>
      <Comment author={comment.author}>
      {comment.content}</Comment><LikeButton liked={comment.liked} id={comment.id} / </div>;
    }); 
var CommentList=React.createClass({
render:function(){
var commentNodes=this.props.data.map(函数(注释){
回来

{comment.content}您必须在服务器端持久化您只是在设置状态,所以使用


您是否有任何错误,如果有,您可以发布它们吗?另外,请查看React团队关于重构您的
LikeButton
的帖子。您的
LikeButton
不应该存储任何状态;它应该仅与
道具
一起工作,并让状态存在于
CommentBox
中。假设我有一个具有3个深层次的组件树,如下所示:您说过,如果我想处理最深子级中的状态,我必须将回调传递给根组件?我想我们必须将组件组织到尽可能低的级别。ssorallen的回答是正确的,并且在必要时通过多个级别的组件执行线程回调是非常典型的。
var CommentBox = React.createClass({
    componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }
React.renderComponent(
  <CommentBox url='comments.json' pollInterval={3000}/>,
  document.getElementById('content')
);
handleClick: function(event) {
  // post to server using ajax here
  this.setState({liked: !this.state.liked, id: this.prop.id});
  liked = this.state.liked;
  id = this.prop.id;
  axios.post('/YOUR_LIKE_UNLIKE_API_END_POINT', {
    liked: liked,
    id: id
  }).catch(function (error) {
    this.setState({liked: !this.state.liked, id: this.prop.id});
  });
},