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

Question

i am new player of pure Reactjs , i have a question in my case below :

My material include navComponent.js, stackComponent.js, nav.js

I want the nav.js data is get from stackComponent.js pass to navComponent.js, and then render the DOM in navComponent i want. Because the nav.js data, i need to reuse for another components in the furture. As the below code, i think i use this wrong react concept. How should i do in CORRECT React way.

In Header of index.html include

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

In Body of index.html include

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

In Footer of index.html include

<!-- 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>

In 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>
      );
  }
});

In 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')
);

In nav.js

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

Answer 1

You could pass navItems as props to stackWrapper:

In stackComponent.js:

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

In stackComponent.js, You can pass navItems using:

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

In navComponent.js, You can collect navItems using:

this.props.navItems

Answer 2

It's not a rule ok. The better and recommended approach , is using events. You can dispatch an event from some component and receive the update at any place you need.

You don't need to implement a entire Flux based application to solve this, you can for example, use the event api of browsers or use a custom dispatcher

In case your components are in same tree, you can update the state and pass state's props as argument to the children components.