传达两个 reactJS 组件

Communicate two reactJS components

本文关键字：两个 reactJS 组件      更新时间：2023-09-26

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

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

所以我想知道当用户单击跟踪组件中的元素时，如何在 ItemList 组件中创建新的"li"项，传递项属性

问候

你基本上有两个选择。

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

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

相关文章：