我可以使用状态和道具在父/子之间进行控制吗

Question

我正在学习React/redux-奇妙的框架，不知道JS Counl会这么酷！！！

我的问题...

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

1. 按下子对象上的按钮将其隐藏

1）可以通过使用this.state控制2）可以通过设置来自父母的道具来控制

我的问题是我不能用状态和道具来控制孩子，因为我认为它是状态或道具。

（这并不完全正确。我可以使用事件组件WillReceiveProps-这是一种方法吗？即主要使用状态，但在事件的道具和状态之间进行转换）

愿意接受其他好的建议

谢谢

__EDIT____________编辑_________编辑___________编辑___________

只需再次阅读FB文档，并猜测我的建议是推荐的方式：

componentWillReceiveProps（）在装入的组件接收新的道具之前被调用。如果需要更新状态以响应道具更改（例如，重置道具），则可以进行比较。props和nextProps并使用它执行状态转换。此方法中的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;