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

How should i communicate with my component in React?

本文关键字：组件 我的 通信 React 我应该      更新时间：2023-09-26

我是纯Reactjs的新玩家，我在下面有一个问题：

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

我想要 nav.js 数据是从 stackComponent 获取的.js传递给 navComponent.js，然后在我想要的 navComponent 中渲染 DOM。因为导航.js数据，我需要重用未来的另一个组件。作为下面的代码，我想我使用了这个错误的反应概念。我应该如何以正确的反应方式做。

在索引的标题中.html包括

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

在索引正文中.html包括

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

在索引页脚中.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>

在导航组件中.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>
      );
  }
});

在堆栈组件中.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')
);

在导航中.js

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

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

在堆栈组件.js中：

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

在stackComponent.js中，您可以使用以下命令传递navItems：

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

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

this.props.navItems
这不是

一个规则。更好和推荐的方法是使用事件。您可以从某个组件调度事件，并在您需要的任何位置接收更新。

您不需要实现整个基于 Flux 的应用程序来解决这个问题，例如，您可以使用浏览器的事件 API 或使用自定义调度程序

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

相关文章：