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

Question

我在一个事件函数中，我想创建一个新的警报弹出窗口（我正在使用react-portal库）：

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函数中动态创建的组件调用组件函数？

Answer 1

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

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

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

然后， render()函数将状态变量用于Portal组件的isOpened属性：

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