Question

嗨，我有两个没有父子关系的组件：

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

和

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

所以我想知道当用户点击Track组件中的元素并传递item属性时，如何在ItemList组件中创建新的“li”项目

问候

Answer 1

你基本上有两个选择。

1）您可以让一个组件控制状态，该组件是两个组件的父组件。然后，您可以将方法向下传递给子组件，以便它们可以与此主组件通信事件/状态更改。

2）您可以使用磁通库。目前，反应社区中最受欢迎的通量库是redux。 Flux使您能够将状态/事件的更改传递给存储，然后存储将状态更改发送到正在侦听存储的其他组件。

沟通两个reactJS组件

1 个答案: