如何从javascript函数内部调用React组件函数

How to call a React component function from inside a javascript function?

本文关键字：函数 调用 React 组件 内部 javascript      更新时间：2023-09-26

我在一个事件函数中，我想创建一个新的警报弹出窗口(我使用的是react门户库(：

onNewAlert: function(username) {
    var divModal = (
        <Portal ref={'Portal'+username}>
                <div id={'div'+username}>
                    <br /><br/ >Alert for {username}
                </div>
        </Portal>);
    ...
}

但是我必须调用Portal中的一个函数。如果我在render()函数中，我通常可以使用引用来执行此操作，但我在一个事件中。

    this.refs['Portal'+username].openPortal(); // openPortal is a function of the Portal component

有没有一种方法可以为javascript函数中动态创建的组件调用组件函数？

即使可以调用portal.openPortal()，它也不会执行任何操作，因为在事件处理程序中创建的组件不会附加到DOM。

事件处理程序不应该尝试在事件处理程序函数中呈现Portal，而应该更改将触发render()的组件状态。

onNewAlert: function(username) {
    this.setState({ showAlert: true });
}

render()函数将使用Portal组件的isOpened属性的状态变量：

render: function () {
    return (
        <div>
            ...
            <Portal isOpened={this.state.showAlert}>
                ...
            </Portal>
        </div>
    );
}
相关文章：