は、私は2クラスに反応していJsのSetState関数が反応ルータ

Question

を使用してリアクト：

const PostList = React.createClass({ 
    getInitialState: function() { 
     return { 
      status: "loading", 
      posts: [] 
     } 
    }, 
    render: function() { 
     return (
     <div id="container"> 
      <ReactRouter.Link to="upload"></ReactRouter.Link> 
      <a href="#/upload">{this.state.status}</a> 
       { 
        this.state.posts.map(function (post) { 
         return (
          <Post post={post} /> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
}); 

const Upload = React.createClass({ 
    render: function() { 
     return (
      <div className="upload">Upload</div> 
     ); 
    } 
}) 

const MainContent = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <Header /> 
       <div id="inner-content"> 
        {this.props.children} 
       </div> 
       <Footer /> 
      </div> 
     ); 
    } 
}) 

const routes = (
    <Route path="/" component={MainContent}> 
     <ReactRouter.IndexRoute component={PostList} /> 
     <Route path="upload" component={Upload} /> 
    </Route> 
) 

var render = ReactDOM.render(<Router history={History}>{routes}</Router>, document.getElementById("content")); 

私は新しい記事をレンダリングするPostListにSETSTATE機能にアクセスすることができますどのように質問はありますか？

投稿新しい投稿が到着したときに、私はちょうど彼の新しいポスト（S）

悪い申し訳ありません

との完全なhtmlコードを再描画するためにPostListの状態を設定したいsocket.io conenctionを通じて更新されます英語...

Answer 1

componentDidMount機能を追加し、新しいメッセージが到着したとき、それは、このような、ポストの現在のリストに追加することを内部で今働いて

const PostList = React.createClass({ 
    getInitialState: function() { 
     return { 
      status: "loading", 
      posts: [] 
     } 
    }, 
    componentDidMount: function() { 
     var that = this; 
     // Be sure to set up data fetching code here 

     // Set up listener for posts updates here 
     socket.on('update', function (data) { 
      // Assuming data contains the post content 
      that.setState({ 
       posts: that.state.posts.concat(data) 
      }); 
     }); 
    }, 
    render: function() { 
     return (
     <div id="container"> 
      <ReactRouter.Link to="upload"></ReactRouter.Link> 
      <a href="#/upload">{this.state.status}</a> 
       { 
        this.state.posts.map(function (post) { 
         return (
          <Post post={post} /> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
});