Question

我有这种设置：

# nginx.conf
server {
    ...
    location /static/ {
        alias /carrot/static_collection/;
    }

    location /media/ {
        alias /carrot/media/;
    }
}

当// 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中的render方法！

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

如果我像通过Parent一样通过Parent传递context的状态，然后通过store在Child中访问它，这似乎是正在工作并引起对this.context.parentState的{{1}}方法的调用，我想这是因为我们收到了新的Child。

这是为什么？ render很棒，但是有没有解决context的好方法吗？

Answer 1

如果要将组件渲染为子级，而这些组件不是Route的组件，则可以将[{A,C,D},{A,C,D},{A,C},{A,D},{A,C},{A}]与React.cloneElement一起使用，例如

React.Children.map

但是，如果作为父级子级呈现的元素是Routes，那么您要么需要使用上下文，要么在// 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收到的任何其他道具都将传递给组件

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将道具传递给孩子。

尽管这是一种方法，但我仍然建议您利用上下文，特别是引入Route使其非常容易实现

Answer 2

您可以这样做。...

   // 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>

渲染React props.children

2 个答案: