Javascript 反应多个组件添加项

我正在用react编写一个web应用程序，并遵循flux架构。遗憾的是，到目前为止，我看到的所有教程要么只使用一个组件，要么有多个嵌套的组件

我的问题是如何将多个没有嵌套的组件一起使用。例如-项目列表组件使用某种表单组件添加新项目。每个示例通常将表单和列表放在同一父容器中

在下面的示例中，假设表单和列表组件都有自己的操作/存储，我如何说当表单的提交事件触发完毕时，更新列表组件

我是否在列表组件中添加对表单组件的引用（如

require（'component'）

这种做法不好吗？我应该制作一个超级组件，其中包含这两个组件吗

var List = React.createClass({
  render: function() {
    return(
      //list of items of some sort
    );
  }
});
var Form = React.createClass({
  handleSubmit: function() {
    //handle submit by firing an action for the dispatcher
  },
  render: function() {
    return(
      //form
    );
  }
});

---

在大多数应用程序中，您需要您的存储来允许组件订阅更改，以便在状态更新时通知组件

您可以为存储创建一个事件处理程序，然后在列表组件中附加一个侦听器

var List = React.createClass({
  getInitialState: function() {
    items: []
  },
  componentWillMount: function() {
    store.addChangeListener(this.updateItems);
  },
  updateItems: function() {
    this.setState({ items: store.getItems() });
  },
  render: function() {
    return (
      // ... render this.state.items
    );
  }
});

本例使用

setState

，这会导致组件重新渲染，但您不必使组件处于有状态。您还可以将存储中的数据作为道具向下传递

您仍然可以从表单组件中分派操作，而无需对该代码进行任何更改，但是每当数据发生更改时，存储必须调用侦听器

不同的Flux实现以不同的方式处理通知商店消费者的想法

常规的vanilla Flux是如此的不受关注，以至于它实际上没有一个监听商店的系统。在一个例子中，他们在商店上创建了两个新方法，围绕着这个功能

emitChange: function() {
  this.emit(CHANGE_EVENT);
},

/**
* @param {function} callback
*/
addChangeListener: function(callback) {
  this.on(CHANGE_EVENT, callback);
}

然后，当一个操作修改存储时，该操作的处理程序负责调用

emitChange

函数

case TodoConstants.TODO_CREATE:
  text = action.text.trim();
  if (text !== '') {
    create(text);
    TodoStore.emitChange();
  }
  break;

onStatusChange: function(status) {
    this.setState({
        currentStatus: status
    });
},
componentDidMount: function() {
    this.unsubscribe = statusStore.listen(this.onStatusChange);
},

一些Flux实现，例如创建它们的存储，新状态作为参数传递给侦听器函数

case TodoConstants.TODO_CREATE:
  text = action.text.trim();
  if (text !== '') {
    create(text);
    TodoStore.emitChange();
  }
  break;

onStatusChange: function(status) {
    this.setState({
        currentStatus: status
    });
},
componentDidMount: function() {
    this.unsubscribe = statusStore.listen(this.onStatusChange);
},

其他的实现，如随附的，允许您使用更具声明性的方法，直接将存储中的某些状态映射到组件上作为属性

// Which part of the Redux global state does our component want to receive as props?
function mapStateToProps(state) {
  return {
    items: state.items
  }
}

var WrappedList = connect(mapStateToProps)(List)

// will receive items from redux state as a prop
<WrappedList />

//我们的组件希望作为道具接收Redux全局状态的哪一部分？
函数MapStateTops（状态）{
返回{
项目：state.items
}
}
var WrappedList=connect（mapStateToProps）（列表）
//将作为道具从redux州接收项目

---

当状态更改时，状态的items部分将作为名为

items

的属性传递，您的组件将重新呈现。

您没有“应用程序”组件吗？99%的React应用程序有一个父组件连接到某个DOM元素。您是否尝试将两个单独的组件连接到单独的元素？@azium Yea 2个组件到2个元素流量将是您的答案。两个组件都可以侦听同一存储以获取更新。