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

Question

I am in an event function and I would like to create a new alert popup (I am using the react-portal library):

onNewAlert: function(username) {

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

But then I would have to call a function that is inside a Portal . I could normally do this with references if I was in the render() function, but I am in an event.

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

Is there a way to call a component function for a component created on the fly in a javascript function?

Answer 1

Even if you could call portal.openPortal() it wouldn't do anything since the component created in the event handler wouldn't be attached to the DOM.

Instead of trying to render the Portal in the event handler function, the event handler should change the component state which will trigger render() .

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

The render() function would then use the state variable for the Portal component's isOpened property:

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