Javascript 如何将回调函数传递给父级

假设我们有一个

容器

组件，如下所示

class Container extends React.Component {
    handleClose = () => {
        // need to ask 'Content' is it okay with closing
        const isContentAgree = /* */;
        if (isContentAgree) this.props.onClose();
    };

    render () {
        const {content: Content} = this.props;
        return (
            <button onClick={this.handleClick}>Close</button>
            <Content {/* some container-specific props */} />
        );
    }
}

类容器扩展React.Component{
handleClose=（）=>{
//需要询问“内容”是否可以结束
常量isContentAgree=/**；
如果（isContentAgree）this.props.onClose（）；
};
渲染（）{
const{content:content}=this.props；
返回(
接近
);
}
}

用法：

<Container content={SomeComponent}/>

---

在这种情况下，如何将回调函数从

SomeComponent

传递到

Container

？单击容器中的按钮并返回布尔值时，将调用此回调。

您需要将

isContentAgree

保持在

状态

，并且可以将切换

isContentAgree

的函数传递给子组件

class Container extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
              isContentAgree: false
            }
        }

        toggleContentAgree = (e) => {
            this.setState({ isContentAgree: e.target.value })
        }

        handleClose = () => {
            // need to ask 'Content' is it okay with closing
            const isContentAgree = this.state.isContentAgree;
            if (isContentAgree) this.props.onClose();
        };

        render () {
            const {content: Content} = this.props;
            return (
                <button onClick={this.handleClose}>Close</button>
                <Content toggleContentAgree={this.toggleContentAgree} />
            );
        }
    }

<Content onHide={handleClose} />

类容器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isContentAgree:false
}
}
toggleContentAgree=（e）=>{
this.setState（{isContentAgree:e.target.value}）
}
handleClose=（）=>{
//需要询问“内容”是否可以结束
const isContentAgree=this.state.isContentAgree；
如果（isContentAgree）this.props.onClose（）；
};
渲染（）{
const{content:content}=this.props；
返回(
接近
);
}
}

您可以使用：

React.cloneElement(SomeComponent, [props...])

---

并作为“props”传递更新容器状态的函数。

您只需将回调函数作为prop传递给组件即可

class Container extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
              isContentAgree: false
            }
        }

        toggleContentAgree = (e) => {
            this.setState({ isContentAgree: e.target.value })
        }

        handleClose = () => {
            // need to ask 'Content' is it okay with closing
            const isContentAgree = this.state.isContentAgree;
            if (isContentAgree) this.props.onClose();
        };

        render () {
            const {content: Content} = this.props;
            return (
                <button onClick={this.handleClose}>Close</button>
                <Content toggleContentAgree={this.toggleContentAgree} />
            );
        }
    }

<Content onHide={handleClose} />

---

在组件中，您必须根据需要调用props.onHide函数。

您应该使用store（Redux/Mobx/ContextAPI）完成此操作。这是做这件事的理想方法

但是

您仍然可以传递回调函数：

class Container extends React.Component {
    render () {
        const {content: Content, callback} = this.props;
        return (
            <button onClick={this.handleClick}>Close</button>
            <Content onSomething={callback} {/* ... */} />
        );
    }
}

<Container content={SomeComponent} callback={someCallbackFunction}/>

类容器扩展React.Component{
渲染（）{
const{content:content，callback}=this.props；
返回(
接近
);
}
}

请参见。

此.手柄点击

？你的意思是说这个把手丢了吗？