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

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

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

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

其中，

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>
    )
  }
}

导出默认类SignUpComponent扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
//形式
)
}
}

我总是获取

上下文。将
存储为
未定义的
。
定义上下文有什么错误吗

我希望在子组件（以及子级别中的子组件）中隐式地访问存储详细信息，而不显式地传递它们

React版本为：
16.8.6
通常，当您通过
MapStateTrops
连接到商店时，您会将所需的道具传递到组件，然后作为组件中的常规道具访问

比如说

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

class Button extends React.Component {
  render() {
    return (
      <button className={"button " + this.props.theme}>
        Button
      </button>
    )
  }
}

export default connect(
      mapStateToProps
    )(Button);

//类型StoreType的状态
常量mapStateToProps=（状态：StoreType）=>({
主题：state.theme
});
类按钮扩展了React.Component{
render（）{
返回(
按钮
)
}
}
导出默认连接(
mapStateToProps
)（按钮）；
我猜您尝试将所需的状态部分传递给组件的方式有问题，因为您应该参考组件属性，该属性使用
MapStateTrops（）
映射到哪个状态变量
theme
，而不是
this.context.store.theme

您可以在下面的示例中找到应该如何实现这一点，希望这能为您提供线索：


//依赖项
const{render}=ReactDOM，
{createStore}=Redux，
{connect，Provider}=ReactRedux
//存储初始化
const defaultState={
someProp:“propValue”，
另一个属性：“justAnotherValue”，
主题：“someTheme”
},
程序=（状态=默认状态，操作）=>状态，
store=createStore（Appeducer）
//自定义组件
常量MyComponent=（{componentTheme}）=>(
主题是{componentTheme}
)
//自定义组件包装器
const mapStateToProps=（{theme}）=>（{componentTheme:theme}），
MyContainer=connect（MapStateTrops）（MyComponent）
//提供者包装器
渲染(
,
document.getElementById（'root'））
)
向我们显示您的
MapStateTrops
对象使用theme属性显示初始状态
{theme:'dark'，//all other state}
@PiccazaDe:请注意，
MapStateTrops
是一个函数，它需要返回的是一个对象，而不是一个对象，您不需要将整个状态映射到给定组件的属性，只需要那些必需的属性（例如，您可以参考）你解决了你的问题还是还在寻找答案？如果前一种情况是这样，那么您最终得到了哪种解决方案？在这种情况下，如果
SignUpComponent
有更多的子组件，那么我们也必须显式地将道具传递给其子组件。我不确定
context
的工作原理，但看到了一些文档和示例，它们说明了如何从context中访问信息，而无需隐式传递。我想这就是PO想要的。@Dipak不，你把每个孩子都连接到商店（你需要商店道具的孩子）@Nicholas，我想在子组件（以及子级别的孩子）中隐式地访问商店详细信息，而不显式地传递它们。PS：我会更新这个问题。对不起。我在代码中犯了一个小错误。我更新了。您必须将您的孩子连接到商店。这就是redux的目的，它具有全局状态并避免手动将道具传递给子组件。你将组件连接到商店并获得道具。@Nicholas如果有
SingUpComponent
的子组件，你能更新你的答案吗？比如说
按钮
，以及如何访问主题而不将其作为道具隐式传递。我也在阅读这个答案，不知道为什么它会被否决。如果能为-1找到一些理由就更好了
// State of type StoreType
const mapStateToProps = (state: StoreType) => ({
  theme: state.theme
});

class Button extends React.Component {
  render() {
    return (
      <button className={"button " + this.props.theme}>
        Button
      </button>
    )
  }
}

export default connect(
      mapStateToProps
    )(Button);