时间戳

首页 > 解决方案 > 如何在 HTML 按钮单击上安装反应应用程序

javascript - 如何在 HTML 按钮单击上安装反应应用程序

问题描述

当单击应用程序外部的按钮（即普通的 html 按钮）时，我正在尝试安装反应应用程序。

以下是我的 index.html 设置：

<div id="app"></div>
<button id="button-root">Live chat</button>
<script src="/dist/rafiki.js"></script>

我尝试使用 React Portals，但所做的只是将一个新节点注入到 DOM 中。我想要实现的是捕获对#button-root切换应用程序状态以安装应用程序的单击。

const buttonRoot = document.getElementByID('button-root')
    class Main extends React.Component{
       contructor(props){
       this.state = {visible: false}
      }
    
    render(){
      return(
       {this.state.visible && <App />}
    )
   }   
 }

this.state.visible 应该通过单击来控制#button-root

标签： javascriptreactjs

解决方案

如评论中所述，您需要在ReactDOM.render()单击按钮时触发。

您的代码可能类似于：

document.getElementById('button-root').addEventListener('click', () => {
  ReactDOM.render(<App />, document.getElementById('app'));
});

const App = () => (
  <p>Mounted!</p>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>
<button id="button-root">Live chat</button>

推荐阅读