我应该如何与我的组件在React中进行通信？

我很纯洁Reactjs的新的球员，我有一个问题在我的情况如下：我应该如何与我的组件在React中进行通信？

我的材料包括navComponent.js，stackComponent.js，nav.js

我想nav.js数据得到从stackComponent.js传递给navComponent.js，然后在我想要的navComponent中渲染DOM。由于nav.js数据，我需要在其他组件中重复使用。如下面的代码，我想我使用这个错误的反应概念。我应该如何采取正确的反应方式。

index.html中的报头包括

<script src="react/react.js"></script> 
<script src="react/react-dom.js"></script> 
<script src="react/browser.min.js"></script>

index.html中的车身包括

<div id="stackWrapper"></div>

index.html中的页脚包括

<!-- Data --> 
<script src="js/nav.js" type="text/javascript"></script> 

<!-- Components --> 
<script src="components/navComponent.js" type="text/babel"></script> 
<script src="components/stackComponent.js" type="text/babel"></script>

在navComponent.js

window.NotesList = React.createClass({ 
    render: function() { 
     return (
      <nav className="pages-nav"> 
      { 
      React.Children.map(this.props.children, function (child) { 
       return <div>{child}</div>; 
      }) 
      } 
      </nav> 
    ); 
    } 
});

在stackComponent.js

var StackWrapper = React.createClass({ 

    render: function() { 
     return (
      <div> 
       <NotesList> 
        { 
         navItems.map(function(value, key){ 
          console.log(key); 
          return <div key={key}>{value.title.name}</div> 
         }) 
        } 
       </NotesList> 
      </div> 
    ) 
    } 
}); 

ReactDOM.render(
    <StackWrapper />, 
    document.getElementById('stackWrapper') 
);

在nav.js

var navItems = [ 
    { 
     title: { 
      name: 'home', 
     }, 
     data: { 
      link: { 
       src: 'page-home' 
      } 
     } 
    }, 
    { 
     title: { 
      name: 'docu', 
     }, 
     data: { 
      link: { 
       src: 'page-docu' 
      } 
     } 
    } 
]

来源

2016-04-26 tommychoo

你可以通过navItems当道具stackWrapper：

在stackComponent.js：

ReactDOM.render(
    <StackWrapper navItems={navItems} />, 
    document.getElementById('stackWrapper') 
);

在stackComponent.js，您可以使用传递navItems：

<NotesList navItems={this.props.navItems}>..</NoteList>

在navComponent。 js，您可以收集navItems使用：

this.props.navItems

来源

2016-04-26 03:39:01

如何在navComponent.js中使用this.props.navItems返回元素？ – tommychoo

为什么我不能在navComponent.js中返回

？ – tommychoo

@tommychoo你可以尝试像返回this.props.navItems.map（函数（navItem）{}）;在navComponent.js它应该工作。 –

这是不正常的规则。更好和recommended approach，正在使用事件。您可以从某个组件分派事件并在您需要的任何地方接收更新。

你并不需要实现一个完整的基于Flux应用到解决这个问题，比如，你可以使用浏览器的情况下，API或使用custom dispatcher

如果您的组件都在同一棵树上，你可以更新状态并将状态的道具作为参数传递给子组件。

来源

2016-04-26 03:20:02

华。你很快回复。你想添加一个jsfiddle演示吗？ – tommychoo

我应该如何与我的组件在React中进行通信？

回答

相关问题