ReactJS - 从外部为多个实例调用组件 function

Question

我想从 React 外部为多个实例调用由 React 组件公开的方法。 在下面的示例中，我想在用户单击文章DIV 的任何位置时触发相应的toggleOverlay方法。 主 DIV 不是通过 React 呈现的，它是从服务器端 (AEM) 呈现的，我可以将 vanilla javascript 添加到文章div 中以附加点击事件。

每个组件的 configData 都不同，这来自 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>
        );
    }

}

我曾尝试使用 - window.articleOverlay = this; 和

调用使用 -

document.querySelector('.article').addEventListener('click', function(){
  window.articleOverlay.toggleOverlay();
});

但怀疑它不应该适用于多个实例，从这里回答https://stackoverflow.com/a/50466217/2479903

有没有办法做到这一点？

Answer 1

无需将 function 设为全局，只需将事件侦听器添加到componentDidMount中的元素，这样多个侦听器也不会有任何问题。

而且由于您有多篇文章，请不要使用querySelector 。 如果.article不是 React 的一部分，而是根节点的父节点，看起来最好的做法是将 ref 附加到渲染的元素，然后在其上使用.closest来查找文章。

改变

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