我可以使用 state AND props 在父/子之间进行控制吗

Question

我正在学习 React/redux - 很棒的框架，不知道 JS 能这么酷！！！

我的问题...

我有一个父组件和一个子组件。孩子可以通过以下方式隐藏/显示：

1. 按下孩子身上的按钮将其隐藏
2. 按下父级按钮以显示/隐藏

1) 可以通过使用 this.state 来控制 2) 可以通过从父级设置一个道具来控制

我的问题是我无法用 State AND 道具控制孩子，因为我认为它是 state OR 道具。

（不完全正确。我可以使用事件组件WillReceiveProps - 这是要走的路吗？即主要使用状态，但在道具和状态之间通过事件转移）

欢迎其他好的建议

谢谢

__EDIT________EDIT_________EDIT_______________EDIT__________

又看了一遍FB docu，猜猜我的建议是推荐的方式：

componentWillReceiveProps() 在挂载组件之前调用 收到新道具。如果您需要更新状态以响应 道具更改（例如，重置它），您可以比较 this.props 和 nextProps 并使用 this.setState() 执行状态转换 这个方法。

Answer 1

您可以将状态和函数从父级传递给子级作为道具。此功能可用于切换状态。您可以在父母和孩子中使用此功能。

例子：

// parent
import React, { Component } from 'react';
import ChildComponent from './path/to/child';

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.handleToggle = this.handleToggle.bind(this);
    }

    state = {
        isVisible: false;
    }

    handleToggle(current) {
        this.setState({
            isVisible: !current
        })
    }

    render(){
        <div>
            <ChildComponent handleToggle={this.handleToggle} isVisible={this.state.isVisible} />
            <button onClick={(isVisible) => this.handleToggle(this.state.isVisible)}>Toggle me</div>
        </div>
    }
}

export default ParentComponent;


// child
import React from 'react';

const ChildComponent = ({ isVisible, handleToggle }) => {
    return (
        <button onClick={(isVisible) => handleToggle(isVisible)}>Toggle me</div>
    );
}

export default ChildComponent;