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

Posted 2023-02-21

【中文标题】我可以使用 state AND props 在父/子之间进行控制吗

【英文标题】：Can I use state AND props for control between parent/child

【发布时间】：2017-07-17 13:29:08

【问题描述】：

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

我的问题...

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

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

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

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

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

欢迎其他好的建议

谢谢

__EDIT________EDIT_________EDIT_______________EDIT__________

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

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

【参考方案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;

【讨论】：

谢谢@patrick slick...我已经支付了功能...只是没想过在双方都使用它