Question

我有使用React库的react-redux个应用。它工作正常，我得到store上下文，我可以发送动作。美丽。

现在我遇到了一个问题。我想在根组件中声明子上下文，并使用它将全局函数传递给子组件。

export default class Root extends React.Component {
    globalFunc() {
    }

    getChildContext() {
        return {
            globalFunc: this.globalFunc
        };
    }

    render() {
        return (
            { /* ChildComponent somewhere in here */ }
        );
    }
}

Root.childContextTypes = {
    globalFunc: PropTypes.func
}

当我从@connect获得react-redux装饰器时，问题出在我得到空对象的一个孩子里面。当我删除装饰器时，我正确地得到了我的上下文。为什么Redux删除了上下文？如何制定解决方法？

@connect(mapStateToProps)
export default class ChildComponent extends React.Component {
    constructor(props, context) {
        super(props, context);

        console.log(this.context); // EMPTY {}
    }

    render() {
        // ...
    }
}

ChildComponent.contextTypes = {
    store: PropTypes.store.isRequired,
    globalFunc: PropTypes.func
}

Answer 1

我有一个类似的问题，当我使用＆＃34;正常＆＃34; HoC形式为connect()函数而不是装饰器，它正在修复问题。请注意，建议不要使用Redux的创建者所说的装饰器表单：https://stackoverflow.com/a/35642430/757461

另外，如果你真的想使用装饰器，我可以通过使用装饰器定义我的上下文来解决这个问题。类似的东西：

export function context(contextTypes, context) {
  return DecoratedComponent => {
    return class extends Component {
      static childContextTypes = contextTypes;

      getChildContext() {
        return context(this.props)
      }

      render() {
        return <DecoratedComponent {...this.props} />
      }
    }
  }
}

然后你就这样使用它：

@connect(mapStateToProps, mapDispatchToProps)
@context(contextTypes, getChildContext)

使用@connect时缺少上下文

1 个答案: