Question

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

我的问题......

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

按下孩子上的按钮隐藏它
按下父级上的按钮以显示/隐藏

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

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

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

接受其他好建议

由于

__ EDIT ____________ EDIT _________ EDIT ___________ EDIT ___________

再次阅读FB docu，并猜测我的建议是推荐方式：

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

Answer 1

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

示例：

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

我可以使用状态AND道具来控制父/子之间的控制

1 个答案: