Question

有没有办法避免每次都将同一个处理程序作为prop传递给子组件？

我创建了一个Popup组件，我希望它在关闭之前更新状态

    closePoPup = (e) => {

        console.log('closePoPup');

        e.preventDefault()
        this.setState({
            renderProgramePoPup: false,
            renderTreeListPoPup: false,
        })
    } 

    .....

    <Popup title="..." classes="..." closePoPup={this.closePoPup}>
        <Foo ... />
    </Popup

但是我必须把道具closePoPup={this.closePoPup}放在每个组件中，如下：

class ProjectForm extends React.Component {

    componentWillMount() {
        this.setState({
            renderProgramePoPup: false,
            renderTreeListPoPup: false,
        });
    }
    ....
    closePoPup = (e) => {

        e.preventDefault()
        this.setState({
            renderProgramePoPup: false,
            renderTreeListPoPup: false,
        })
    }
    ....
    render() {
        return (
                <div>
                    ...
                    {(this.state.renderProgramePoPup ?
                        <Popup title="..." classes="..."
                            closePoPup={this.closePoPup}>
                            <SimplePopUp ... />
                        </Popup> : null
                    )}

                    {(this.state.renderTreeListPoPup ?
                        <Popup title="..." classes="..."
                            closePoPup={this.closePoPup}>
                            <TreeList ... />
                        </Popup> : null
                    )}
                </div>   
        )
    }

}

Answer 1

您可以构建一个包装器：

fsetpos()

如果您有不同类型的组件需要render() { const PopupWithCloseProp = props => <Popup closePoPup={this.closePoPup} {...props} />; return ( <div> <PopupWithCloseProp someProp /> <PopupWithCloseProp someDiffProp /> </div> ); }，则为通用工厂：

closePoPup

Answer 2

一个可能的解决方案是创建列表或对象this.state.renderPopUp。然后，您可以map()在列表上（或Object.keys()）创建Popup的列表。您可以通过在列表中包含每个Popup的数据来进一步扩展这个想法。

避免将相同的处理程序作为道具

2 个答案: