如何從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>
    );
}