Javascript 重播反应道具

我有这种设置：

// 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.js中
类父类扩展了React.Component{
render（）{
返回{this.props.children}
}
}
//在Child.js中
子类扩展了React.Component{
render（）{
让信息；
const greet=this.context.store.parentState.greet；
如果（问候）信息=‘你好，世界！’；
返回(
{message}
)
}
}
Child.contextTypes={
存储：PropTypes.object.isRequired
}
//内部App.js

当

Parent

通过

setState

接收新状态时，调用其

render

方法，但不调用

Child

中的

render

方法

我想实现这一点的原因是因为

Child

中的某些逻辑依赖于

Parent

的状态

如果我通过

context

传递

Parent

的状态，就像传递

store

一样，然后通过

this.context.parentState

在

Child

中访问它，这似乎起到了作用，并导致调用

Child

的

render

方法，我想这是因为我们收到了新的

上下文

为什么会这样<代码>上下文

很好，但是有没有一种不需要上下文就可以解决这个特定问题的好方法？

您可以这样做

   // inside  Parent.js       
   class Parent extends React.Component {
        render() {
            return (
              <Child children={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 }
                    { this.props.children }
                </div>
            )
        }
    }
    Child.contextTypes = {
        store: PropTypes.object.isRequired
    }



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

//在Parent.js中
类父类扩展了React.Component{
render（）{
返回(
)
}
}
//在Child.js中
子类扩展了React.Component{
render（）{
让信息；
const greet=this.context.store.parentState.greet；
如果（问候）信息=‘你好，世界！’；
返回(
{message}
{this.props.children}
)
}
}
Child.contextTypes={
存储：PropTypes.object.isRequired
}
//内部App.js

如果将组件渲染为子组件，而不是要路由的组件，则可以使用

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

但是，如果作为子级呈现给父级的元素是路由，那么您需要利用上下文或围绕

Route

编写包装，以便路由接收的任何额外道具都传递给组件

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

constroutewrapper=（{exact，path，component:component，anyOtherRouterProp，…rest}）=>
} />

其中，在上述情况下，

anyOtherRouterProp

是适用于

Route

的道具，需要单独解构。之后，您可以使用React.Children.map和React.cloneElement将道具传递给孩子们

---

尽管这是一种方法，但我仍然建议您使用上下文，特别是引入了

新上下文API

，这使得实现起来非常容易

，感谢您的回复。我想避免在

Parent

内部使用

Child

，因为

Parent

可以将更多的

Child

作为子项。为此，您可以使用redux或flux.response@Shubham Khatri。在这里可以学到很多东西：）。我认为，正如您所指出的，

context

更适合这个问题。除此之外，断言组件仅在接收新的

道具

、

上下文

、或通过

设置状态

重新呈现是否详尽？此外，断言组件仅在通过设置状态接收新道具、上下文或状态时重新呈现是否详尽？？不一定，因为有人可以调用forceUpdate来触发重新渲染，除此之外，如果父级重新渲染，所有子级也将触发其渲染方法，除非它们是PureComponents