我有这种设置：

// inside  Parent.js
class Parent extends React.Component {
    render() {
        return { this.props.children }
    }
}

// inside Child.js
class Child extends React.Component {
    render() {
        let message;
        const greet = this.context.store.parentState.greet;
        if(greet) message = 'Hello, world!';
        return (
            <div>
                { message }
            </div>
        )
    }
}
Child.contextTypes = {
    store: PropTypes.object.isRequired
}



// inside App.js
<Parent>
    <Route path='/a-path' component={ Child } />
</Parent>

当Parent通过setState接收新状态时,将调用其render方法,但不会调用Child中的render方法！

我之所以想要实现,是因为Child中的某些逻辑取决于Parent的状态.

如果我通过上下文(如存储的传递方式)传递Parent的状态,然后通过this.context.parentState在Child中访问它,这似乎正在起作用并导致对Child的render方法的调用,我想这是因为我们正在接收新环境.

为什么是这样？上下文很好,但是在不需要上下文的情况下有解决这个特定问题的好方法吗？

解决方法:

如果您将组件作为子级呈现,而不是Route的组件,则可以将React.cloneElement与React.Children.map一起使用

// inside  Parent.js
class Parent extends React.Component {
    render() {
        return React.Children.map(this.props.children, (child) => 
               React.cloneElement(child, {parentState: this.state.parentState})
        );
    }
}

但是,如果呈现为“父级子代”的元素是Routes,那么您要么需要使用上下文,要么在Route周围编写包装,以便将Route接收到的所有其他道具传递给组件

const RouteWrapper = ({exact, path, component: Component, anyOtherRouterProp, ...rest}) => 
      <Route exact={exact} path={path} {...otherRouterProps} render={(props) => <Component {...props} {...rest} />} />

在上述情况下,anyOtherRouterProp是适用于该路线的道具,需要分别进行分解.之后,您可以使用React.Children.map和React.cloneElement将道具传递给孩子.

尽管这是一种方法,但我仍然建议您使用上下文,尤其是引入新的上下文API时,它可以非常容易地实现