交流两个reactJS组件

Question

Hi I have this two components that does not have a parent-child relation:

var Track = React.createClass({
  rawMarkup: function() {
  var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
  return { __html: rawMarkup };
},

render: function() {
  return (
    <li className = 'right_menu_li valign-wrapper ten-margin-bot'>
      <a style={{cursor: 'pointer'}}>
        <i className="tiny material-icons blue-gray base">playlist_add</i>
        {this.props.name + " "}
      </a>    
    </li>
  );
 }
});

and

var ItemList = React.createClass({
  render: function() {
  var createItem = function(item) {
    return <li key={item.id}>{item.text}</li>;
  };
    return <ul>{this.props.items.map(createItem)}</ul>;
 }
});

So I want to know how to create new "li" items in ItemList component when a user clicks on an element in Track component, passing the item properties

regards

Answer 1

You basically have two options.

1) you can have state controlled by a component that is a parent component to both of your components. You can then pass methods down to child components so that they can communicate events / state changes with this master component.

2) You can use a flux library. Currently the most popular flux library among the react community is redux . Flux enables you to communicate changes in state / events to stores which then emit the change in state to other components which are listening to the stores.