时间戳

首页 > 解决方案 > 如何从 React 应用程序外部触发 React 函数

javascript - 如何从 React 应用程序外部触发 React 函数

问题描述

我有一个模式，它在加载时将自身附加到非反应页面的 DOM。在该页面上是一个应该启动模式的按钮。我怎么能从那个按钮调用 toggleModal？

索引.html

 <body class="page basicpage">
        <button class="modal-trigger">Click Here</button>
        <div id="spa-root"></div>
    </body>

index.js

document.addEventListener('DOMContentLoaded', () => {
const spaContainer = document.createElement('div');
spaContainer.className = "spa-container";
document.body.append(SwSpaContainer);

  ReactDOM.render(<App ref={(Modal) => {window['Modal'] = Modal}}/>, spaContainer);

  document.querySelector('.modal-trigger').addEventListener('click', ()=>{
    console.log(window.Modal.toggleModal);
  });

应用程序.js

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      isModalOpen: false
    }
  }

  toggleModal = () => {
    this.setState(() => {
      return {
        ...this.state,
        isModalOpen: true
      }
    })
  };

  render() {
    return (
      <div>
        <Modal shouldModalOpen={isModalOpen}/>
      </div>
    );
  }
}

export default App;

标签： javascriptreactjs

解决方案

推荐阅读