Javascript ReactJS-从外部为多个实例调用组件函数

我想为多个实例从React外部调用React组件公开的方法。 在bellow exmaple中，当用户单击articleDIV的任何位置时，我想触发相应的toggleOverlay方法。主DIV不是通过React呈现的，它是从服务器端（AEM）呈现的，我可以将香草javascript添加到articleDIV中以附加单击事件

每个组件的配置数据都不同，这与AEM（服务器端）不同

例如：

<div class="main">
    <div class="article">
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <articleOverlay configData="" /> 
    </div>
    <div class="article">
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <articleOverlay configData="" />
    </div>
    <div class="article">
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <articleOverlay configData="" />
    </div>
</div>


// articleOverlay component
class articleOverlay extends React.Component {
    constructor(props) {
        super(props);
    
        this.state = {
            showOverlay: false
        };

        window.articleOverlay = this;

       toggleOverlay = (e) => {
           if (this.state.showFlyout) {
               this.setState({ showOverlay: true }
           }else{
               this.setState({ showOverlay: false }
           }
       }

    }

    render() {
        const { configData } = this.props;
        return (
            <div className="article-overlay">
                <button className="article-overlay__button" onClick={this.toggleOverlay}>View flows</button>
                {
                    this.state.showOverlay && 
                    <div className="article-overlay__body">
                        <div className="article-overlay__item">
                            {configData.name}
                        </div>
                    </div>
                }
            </div>
        );
    }

}

但如果怀疑它不适用于多个实例，请从这里回答

---

有什么方法可以实现这一点吗？

无需将函数设置为全局函数，只需将事件侦听器添加到

componentDidMount

中的元素，这样多个侦听器也不会有任何问题

由于您有多篇文章，所以不要使用

querySelector

。如果

.article

不是React的一部分，而是根节点的父节点，则它看起来像是将ref附加到渲染元素，然后在其上使用

.closest

查找文章

改变

<div className="article-overlay">

---

好的，它适用于多个article div的实例吗？是的，就像答案所说的-多个Listener不会有任何问题。谢谢！让我在应用程序中试用一下，让您知道。不起作用。点击第一篇文章打开所有覆盖，如果我点击除第一篇以外什么都没有发生。哦，我明白了，你有多个覆盖。您需要使用

.closest

来访问祖先文章，而不是使用

querySelector

<div className="article-overlay">

<div className="article-overlay" ref={div => this.article = div.closest('.article') }>

componentDidMount() {
  this.article.addEventListener('click', this.articleOverlay);
}
// cleanup too...
componentWillUnmount() {
  this.article.removeEventListener('click', this.articleOverlay);
}