反应多个组件添加项目答案

【问题标题】：react multiple components add item反应多个组件添加项目
【发布时间】：2023-03-26 02:20:01
【问题描述】：

我正在编写一个带有 React 的 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
    );
  }
});

【问题讨论】：

您没有“应用”组件吗？ 99% 的 React 应用程序都有一个附加到某个 DOM 元素的父组件。您是否尝试将两个单独的组件附加到单独的元素？
@azium 是的 2 个组件到 2 个元素
那么flux就是你的答案。两个组件都可以监听同一个 store 的更新。

标签： javascript reactjs flux

【解决方案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 导致组件重新渲染，但是您不必使组件有状态。您也可以将 store 中的数据作为道具向下传递。

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

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

Regular 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;

Reflux 等一些 Flux 实现将它们的存储设为 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 的属性传递，并且您的组件将重新渲染。

【讨论】：