如何在RefluxJS中设置一个特定的组件实例？

Question

我正在做一个小项目React + Flux（RefluxJS）我遇到了一个我无法解决的问题。如果有人能帮我一把，我会非常感激。

在这里你有整个项目the link to GitHub为了方便你的帮助，这是一个最简单的版本，只是为了重现我面临的问题。

我的疑问是，如何在同一视图中使用不同内容的一个组件。让我来解释：

我有分量，“组件/ threads.jsx”这在总结渲染代码从存储中获取数据这一和平（“专卖店/线程store.jsx”）通过量假API（“utils的/ api.jsx”）：

renderThreads: function() { 
    return this.state.thread_content.map(function(thread, i) { 
     return (
      <div key={thread.id}> 
       <div className="row"> 
        <div className="col-md-10"> 
         <a data-toggle="collapse" href={'#thread-' + thread.id} className="faq-question">{thread.name}</a>: <small>{thread.content}</small> 
        </div>    

       </div> 
       <div className="row"> 
        <div className="col-lg-12"> 
         <div id={'thread-' + thread.id} className="panel-collapse collapse "> 
          <Posts id={thread.id} /> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 

    }); 
}, 

正如哟所看到的，我已另一部件嵌套在“组件/线程posts.jsx”称为 “信息”，其呈现为每个线程被映射。在“帖子”组件中，我有这样的代码和平：

module.exports = React.createClass({ 
mixins: [ 
    Reflux.listenTo(PostsStore, 'onChange'), 
], 
getInitialState: function() { 
    return { 
     posts: [] 
    } 
}, 
componentDidMount: function() { 
    Actions.getPosts(this.props.id); 
}, 
render: function() {  
    return (
     <div> 
      {this.renderPosts()} 
     </div> 
    ); 
}, 
renderPosts: function() { 
    if(this.state.posts.comments != undefined){ 
     return this.state.posts.comments.map(function(post, i) { 
      return(        
       <div key={i} className="faq-answer"> 
        <p>    
        {post.content} 
        </p> 
       </div> 
      ); 
     }); 
    } 
}, 
onChange: function(event, posts) { 
    this.setState({ 
     posts: posts, 
    }); 
} 

问题来了。当完成渲染时，所有线程都有相同的帖子，特别是最后一个被设置。我认为是与国家有关，如果他们改变它将被改变的所有组件被渲染。

所以，我的问题是，我如何处理它，以便根据其线程使用相同的组件来发布帖子？如果它不可行，那么最好的解决方案是做什么？

我希望能够解释我自己以及足以理解我。

如果你能在这个问题上给我帮助，我将非常感激。

在此先感谢。

Answer 1

是，如果你与你的搜索共享存储那么最近的一次将覆盖以前的组件的数据

，你必须创建一个单独的变量，它可以抱你必须每个API调用的数据，并在呼叫API传似

的关键，让我们举一个例子

我有一个组件，它被称为MainComponent 我想用同一个页面上相同的组件两次，但该数据应该是两个组件 我有一个商店MainComponent不同称为MainStor Ë 在MainStore我称之为一个方法的getData像

getData:function(key) 
{ 
//API Call 
} 

现在我从componentDidMount事件我MainComponent调用此方法像

componentDidMount:function() 
{ 
    //if you used Action then you have to called like 
    MainComponentAction.getData(this.props.Key); 
    // if you directly called 
    MainComponentStore.getData(this.props.Key); 
} 

这里this.props。关键你必须从父组件，它应在1或2

现在来存储，而我们从API接收到数据，我们已经通过了关键所以现在我们要检查的条件

想我已经采取了一个传变量在我存储通过API返回像

现在你必须创建两个方法商店基于关键 VAR _data数据到数据，_data1

function loaddata(APIdata,key) 
    { 
    if(key===1) 
     { 
     _data=APIdata 
     } 
    else 
    { 
     _data1=APIdata 
    } 

    } 

，并在你店方法用于获取数据，如

getData:function() 
{ 
return _data; 
}, 
getData1:function() 
{ 
return _data1; 
} 

现在您MainComponent的getintialState应

getintialState:function() 
{ 
return{ 
    Data:JSON.Parse(MainComponentStore.getData()), 
    Data1:JSON.Parse(MainComponentStore.getData1()), 
    } 
} 

和你MainComponent渲染功能应该是

render:function(){ 
    var LatestData; 
    if(this.props.Key===1) 
    { 
    LatestData=this.state.Data 
    } 
    else if(this.props.Key===2) 
    { 
    LatestData=this.state.Data1 
    } 
return(
    <div> 
    {LatestData} 
    </div> 
) 
    }