javascript-重新渲染React props.children

2019-11-08 18:46:33 阅读：201 来源： 互联网

我有这种设置：

// 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时,它可以非常容易地实现

标签：reactjs,javascript
来源： https://codeday.me/bug/20191108/2010018.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-重新渲染React props.children