如何将道具（从 Redux 获得）从一个组件传递到另一个组件 (React/Redux)？

Question

如何将道具（从 Redux 获得）从 WrapperComponent 传递到 InnerComponent (React/Redux)？

import React, { Component } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import InnerComponent from "./InnerComponent ";

class WrapperComponent extends Component {
  state = {
    data: []
  };

  render() {
    return (
      <div>
        <InnerComponent props={this.props} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps)(withRouter(WrapperComponent));

渲染 WrapperComponent 后 - 道具仍然没有。任何LifeCicle Methods都无法帮助解决它。

可能吗？

Answer 1

这是可能的，建议这样做，这样你就不需要每次都通过'connect'调用所有的HOC存储。将所有相关操作和 reducer 调用到您的容器并将它们作为 props 传递。

在这种情况下，你的reducer名称叫做data，你需要这样调用它（我把props名称改成data，所以你可以调用props.data到你的child）：

<InnerComponent data={this.props.data} />

或者您可以像这样传递 parents 中的所有道具：

<InnerComponent {...this.props} />

如何将道具（从 Redux 获得）从一个组件传递到另一个组件 (React/Redux)？

How to pass props (that getting from Redux) from one Component to another (React/Redux)?

reactjs

react-router

redux

react-redux

react-router-dom