Question

我是纯Reactjs的新玩家，我的问题如下：

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

我希望nav.js数据从stackComponent.js传递到navComponent.js，然后在我想要的navComponent中渲染DOM。因为nav.js数据，我需要重新使用其他组件。如下面的代码，我想我使用这个错误的反应概念。我该怎么做CORRECT React方式。

在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'
          }
      }
  }
]

Answer 1

您可以将navItems作为道具传递给stackWrapper：

在stackComponent.js中：

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

在stackComponent.js中，您可以使用：

传递navItems

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

在navComponent.js中，您可以使用以下方法收集navItem：

this.props.navItems

Answer 2

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

您无需实施基于Flux的整个应用程序来解决此问题，例如，您可以使用浏览器的事件api或使用custom dispatcher

如果你的组件在同一个树中，你可以更新状态并将状态的props作为参数传递给子组件。

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

2 个答案: