javascript - react 多个组件添加项目

Question

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

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

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

我是否在列表组件中添加对表单组件的引用(如 require('component')？

这是不好的做法吗？我应该制作一个包含这两个组件的 super 组件吗？

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

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

不同的 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开店behave in this way out of the box并将新状态作为参数传递给监听器函数。

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

其他，实现如Redux附带一个 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 的属性传递，您的组件将重新呈现。