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

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

export default connect(
      mapStateToProps
    )(Button);

Answer 2

我猜测您尝试将状态的必需部分传递给组件的方式出了问题，因为您应该引用组件属性，即状态变量theme与{{1}映射到了该属性}，而不是mapStateToProps()。

您可能会在下面的精炼示例中找到该方法的摘要，希望能为您提供线索：

this.context.store.theme

//dependencies
const { render } = ReactDOM,
      { createStore } = Redux,
      { connect, Provider } = ReactRedux
      
//store initialization
const defaultState = {
        someProp: 'propValue',
        anotherProp: 'justAnotherValue',
        theme: 'someTheme'
      },
      appReducer = (state=defaultState, action) => state,
      store = createStore(appReducer)
//custom component
const MyComponent = ({componentTheme}) => (
  <div>
    the theme is {componentTheme}
  </div>
)
//custom component wrapper
const mapStateToProps = ({theme}) => ({componentTheme: theme}),
      MyContainer = connect(mapStateToProps)(MyComponent)
//provider wrapper
render(
  <Provider store={store}>
    <MyContainer />
  </Provider>,
  document.getElementById('root')
)

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

2 个答案: