在React中重新渲染子组件或更改子状态

Question

For example, we have a component (this is a child):

class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {show: props.show || false};
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
    }   
    close() {
        this.setState({show: false});
    }

    open() {
       this.setState({show: true});
    }
    render() {
        return (
            <div>
                <Button onClick={this.open}>Open</Button>
                <Modal show={this.state.show} onHide={this.close}>
                    .........
                        <Button onClick={this.close}>Close</Button>
                </Modal>
            </div>
        );
    }
}

and we have parents component:

class Parents extends React.Component {
    constructor(props) {
        super(props);
        this.state = {show: false};
        this.open = this.open.bind(this);
    }
    open() {
        this.setState({show: true});
    }
    render() {
        return (
            <div>
                <Button onClick={this.open}>open</Button>
                <Child show={this.state.show}/>
            </div>
        )
    }
}

So i just want be able to open modal element from parents and then be able to change the same child state from child. I tried use componentWillReceiveProps() and also i use npm package: react-komposer . But none of that is helpful in this case. I also thought about re-render child component with new props, but i can't re-render it from parents component.

Any idea how can we manipulate with child state?

Answer 1

If you wanna change the modal state in parents components, you should just handle it there (on the parent component). The Child in this case could be a stateless component that invokes the functions from the parent. Is there a reason not to do it this way?

For example:

<Button onClick={props.open}>Open</Button>
<Modal show={props.show} onHide={props.close}>
       .........
       <Button onClick={props.close}>Close</Button>
</Modal>