reactjs - render() 中的 connect() ？

Question

我有一个动态属性列表，我试图用它来为该列表中的每个对象实例化一个 React 组件。

这是我的 mapStateToProps() 和 mapDispatchToProps() 的简化版本:

export function mapStateToProps(id) {
  return function(state) {
    return state.widgets.find((widget) => id === widget.id);
  };
}

export function mapDispatchToProps(id) {
  return function (dispatch) {
    return {
      fetchData: (path, props) => dispatch(fetchData(id, path, props)),
    };
  }; 
};

然后在父组件中:

render() {

  const widgets = this.props.widgets.map((widget) => {
    return connect(
      mapStateToProps(id),
      mapDispatchToProps(id),
    )(Widget);
  });

  return <div>{ widgets }</div>;
}

它不会抛出任何异常，但不会调用 mapStateToProps() 或 mapDispatchToProps()。

到目前为止我唯一的猜测是需要提前调用 connect() ，但我不确定如何使用动态 Prop 列表来做到这一点。有人对如何实现这项工作有任何想法吗？

Answer 1

mapStateToProps 和 mapDispatchToProps 都有第二个参数 ownProps。您可以在这些函数中获取传递的 props 并像导出任何其他容器一样导出连接的 Widget。

// WidgetContainer.js

function mapStateToProps(state, ownProps) {
  return state.widgets.find((widget) => ownProps.id === widget.id);
}

function mapDispatchToProps(dispatch, ownProps) {   
  return {
    fetchData: (path, props) => dispatch(fetchData(ownProps.id, path, props)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Widget);

然后在你的循环中执行 @thedude 的建议:

return <div>{this.props.widgets.map(w => <Widget id={w.id} />)}</div>

文档:https://github.com/reactjs/react-redux/blob/master/docs/api.md