为什么在子组件中未定义React Redux context.store？

Question

我正在尝试从子组件访问存储，但是它始终是未定义的，因此，我必须将属性传递给子组件。

这是应用程序的主要起点：

ReactDOM.render(
  <Provider store={store}>
    <SignUpContainer />
  </Provider>,
  container
);

SignUpContainer在哪里：

const SignUpContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUpComponent);

SignUpComponent是正常反应成分：

export default class SignUpComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className={"sign-up-component " + this.context.store.theme}>
        // Form
      </div>
    )
  }
}

我总是将context.store取为undefined。定义上下文有什么错误。

实际版本为：16.8.6。

Answer 1

通常，当您通过mapStateToProps连接到商店时，您将所需的道具传递给组件，然后在组件中作为常规道具进行访问。

例如]

// State of type StoreType
const mapStateToProps = (state: StoreType) => ({
  theme: state.theme
});


const SignUpContainer = connect(
  mapStateToProps
)(SignUpComponent);

export default class SignUpComponent extends React.Component {
  render() {
    return (
      <div className={"sign-up-component " + this.props.theme}>
        // Form
      </div>
    )
  }
}