Question

我正在编写一个带有反应的Web应用程序，并且我正在遵循flux体系结构。遗憾的是，我到目前为止看到的所有教程要么只使用1个组件，要么它们有多个嵌套的组件。

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

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

我是否在列表组件中添加了对表单组件的引用（例如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导致组件重新呈现，但是您不必使组件有状态。您还可以将商店中的数据作为道具传递下来。

您仍然可以从表单组件调度操作而不对该代码进行任何更改，然而您的商店必须在数据发生更改时调用侦听器。

不同的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的属性传递，您的组件将重新呈现。

反应多个组件添加项目

1 个答案: