反应多个组件添加项目

Question

我正在编写一个带有 React 的 Web 应用程序，并且我正在遵循 Flux 架构。可悲的是，到目前为止我看到的所有教程要么只使用 1 个组件，要么有多个嵌套的组件。

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

在下面的示例中，假设表单和列表组件各有自己的 action/store，当表单的提交事件完成触发时，我怎么说更新列表组件？

我是否在列表组件中添加对表单组件的引用（如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
    );
  }
});

Answer 1

在大多数应用程序中，您需要商店允许组件订阅更改，以便在更新状态时通知它们。

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

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 导致组件 re-render，但是您不必使组件有状态。您还可以将商店中的数据作为 prop 向下传递。

您仍然可以从您的表单组件发送操作而不对该代码进行任何更改，但是您的商店必须调用监听器每当数据更改时。

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

普通的 vanilla Flux 是如此的不拘一格，以至于它实际上并没有附带一个用于听商店的系统。 It is suggested that you inherit from Node's EventEmitter class。在一个示例中，他们在商店中创建了两个围绕这一功能的新方法。

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;

一些 Flux 实现，例如 Reflux make their stores behave in this way out of the box，新状态作为参数传递给侦听器函数。

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

其他实现，例如 Redux come with a wrapper layer for React，它允许您使用更具声明性的方法并将存储中的某些状态作为属性直接映射到组件。

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

当状态发生变化时，状态的项目部分将作为一个名为 items 的属性传递，您的组件将 re-render.

反应多个组件添加项目

react multiple components add item

javascript

flux

reactjs