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>
    );
}

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

1 个答案: