时间戳

首页 > 解决方案 > 如何将道具（从 Redux 获取）从一个组件传递到另一个组件（React/Redux）？

reactjs - 如何将道具（从 Redux 获取）从一个组件传递到另一个组件（React/Redux）？

问题描述

如何将道具（从 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 方法都无法帮助解决它。

是否可以？

标签： reactjsreduxreact-reduxreact-routerreact-router-dom

解决方案

这是可能的并且建议这样做，因此您不需要每次都通过“连接”调用所有 HOC 存储。将所有相关的操作和减速器调用到您的容器中，并将它们作为道具传递。

在这种情况下，你的reducer名字叫做data，你需要这样调用（我把props名字改成了data，所以你可以给你的孩子调用props.data）：

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

或者你可以像这样传递来自父母的所有道具：

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

推荐阅读