React组件改变内部事件的道具

Question

我正在创建一个反应组件，我需要根据道具显示隐藏dom元素。您将在下面找到问题的基本概念。当然简化了代码。

<UploadManager
    show={show}
>
{content}
</UploadManager>

组件

export default class UploadManager extends React.Component{

    openDrawer(){
        // change props.open ???
    }

    render(){
        <Drawer
          visible={this.props.show}
        >
         <p>Content</p>
        </Drawer>
        <Button onClick={this.openDrawer} />
    }
}

说明

1. show组件的UploadManager道具打开/关闭Drawer component
2. 父组件可以传递show道具并显示/隐藏抽屉。我让这部分工作正常。
3. 需要帮助：该组件有一个浮动按钮。单击时，它应该打开（显示）抽屉。意思是它应该将this.props.show设置为true。

我试图保持组件的内部状态，管理抽屉的显示/隐藏属性，但由于道具+状态介入，它变得太麻烦了。

Answer 1

你的答案很好，除了你不需要openDrawer组件中的UploadManager，实际上它可能是一个虚拟功能组件，这是一个可能的解决方案：

const UploadManager = ({show, onClick}) => (
   <Drawer visible={show}>
     <p>Content</p>
   </Drawer>
   <Button onClick={onClick} />
);

那么父组件就是

onClickShowButton = () => {
   this.setState({show: true});
}

render(){
   return (
     <UploadManager 
          show={this.state.show} 
          onClick={this.onClickShowButton}
     >
       {content}
     </UploadManager>
   );
}

Answer 2

需要从父级传递回调来更改道具。以下是此问题的解决方案。

this.onClickShowButton()是父母的方法。

父组件

onClickShowButton = () => {
    this.setState({show: true});
}

render(){
    return <UploadManager
        show={this.state.show}
        onClickShowButton={this.onClickShowButton}
    >
    {content}
    </UploadManager>
}

在组件上

检查回调函数是否为函数，然后执行它。工作完美！

export default class UploadManager extends React.Component{

    openDrawer = () => {
        if (typeof(this.props.onClickShowButton) === 'function') {
            this.props['onClickShowButton']();
        }
    }

    render(){
        <Drawer
          visible={this.props.show}
        >
         <p>Content</p>
        </Drawer>
        <Button onClick={this.openDrawer} />
    }
}

如果是这样，它会执行它。我不知道这种方法有多正确。如果有人有更好的答案，我愿意接受。

Answer 3

如果父组件只是将上传管理器的初始状态设置为在第一次渲染时显示或隐藏抽屉，则可以执行以下操作：

    <UploadManager
        show={show}
    >
    {content}
    </UploadManager>

    export default class UploadManager extends React.Component{
        constructor(props){
           super(props);
           this.state = {
              open: props.show
           }
        }
        openDrawer(){
            this.setState({open: true});
        }

        render(){
            <Drawer
              visible={this.state.open}
            >
             <p>Content</p>
            </Drawer>
            <Button onClick={this.openDrawer} />
        }
    }

以这种方式，组件的初始状态将是其父级传递的show属性，然后当单击该按钮时，此状态将更新，并且基于组件状态显示抽屉。但是如果你想控制父传递的show属性并且你想用它来控制你的抽屉，你应该这样做：

    <UploadManager
        show={show}
        onUpdateShowState={()=>{this.setState({show: true})}}
    >
    {content}
    </UploadManager>

    export default class UploadManager extends React.Component{

        openDrawer(){
            this.props.onUpdateShowState()
        }

        render(){
            <Drawer
              visible={this.props.show}
            >
             <p>Content</p>
            </Drawer>
            <Button onClick={this.openDrawer} />
        }
    }

在上面的代码中，您使用show属性控制您的抽屉，该属性将传递给您的组件，并且您通过调用另一个更新父状态的属性来更新它：this.setState（{show：true}） - >所以这里这引用了已经定义了show的父组件，应该写在uploadManager的父组件中

Answer 4

做这样的事情：

组件：

export default class UploadManager extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            openDrawer : props.show
        }
    }
    componentDidUpdate(){
        this.setState({
            openDrawer: this.props.show
        })
    }
    openDrawer = () =>{
        this.setState({
            openDrawer : !this.state.openDrawer
        })
    }
    render() {
        <div>
            <Drawer
                visible={this.state.openDrawer}
            >
                <p>Content</p>
            </Drawer>
            <Button onClick={this.openDrawer} />
        </div>
    }
}