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()需要提前调用，但我不知道如何使用动态的道具列表来做到这一点。有人对如何使这项工作有任何想法吗？

Answer 1

mapStateToProps和mapDispatchToProps都有ownProps的第二个参数。您可以在这些函数中获取传递的道具，并像导出任何其他容器一样导出连接的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>

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

Answer 2

请不要在render方法中使用connect。相反，使用道具向孩子发送你需要的任何东西。

import React from 'react';
import ReactDOM from 'react-dom';

var PLAYERS = [
  {
    name: 'xyz',
    score: 123
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      players: []
    };
  }
  componentDidMount() {
    this.setState({
      players: this.props.initialPlayers
    });
  }
  render() {
    return(
      <div>
        <ul>
          {this.renderPlayers()}
        </ul>
      </div>
    );
  }
  renderPlayers() {
    return this.state.players.map((player, index) =>
      <li key={index}>{`name: ${player.name} - score: ${player.score}`}</li>
    );
  }
}

ReactDOM.render(
  <App initialPlayers={ PLAYERS }/>,
  document.getElementById('root')
);

在@connect(state => ({ widgets: state.yourReducer.widgets }), { fetchData: yourFetchActionCreator, // <-- bind your action creator here }) class ParentComponent extends PureComponent { render() { return ( <div> { this.props.widgets.map(widget => <Widget {...widget} fetchData={this.props.fetchData} />) } </div> ); } }内，您将拥有每个Widget对象内的ID和所有内容。

祝你好运！

render（）中的connect（）？

2 个答案: