將 React 組件注入 html 頁面

Question

我正在嘗試用 React 做一些事情，但我不知道我是否以正確的方式做這件事......

我創建了一個 React 組件（使用 create-react-app）。

我將 js 文件（構建后）放在 web 服務器上。

之后，在 html 頁面上，當我單擊按鈕時，我插入 js 文件。 如果頁面上存在具有特定 id 的 div，則加載該組件。

很酷，我為我所做的一切感到高興，萬歲 \o/

但在那之后，我試圖刪除組件（清空 div）並單擊按鈕重新加載，但沒有任何反應......

當我單擊按鈕時調用的 function 刪除腳本，清空 div 和重新插入腳本。 但是什么也沒發生……我不知道為什么：/

任何幫助將不勝感激：D

提前謝謝

編輯：我解決了我的問題。 我正在刪除腳本，假設重新注入它會重新加載組件，但它不會那樣工作......

這是一個示例代碼： https://codesandbox.io/s/blissful-fire-ytbj9?file=/public/index.html

我在 React 組件中寫了一個 function 來渲染它。 我可以直接在 html 頁面中調用這個 function，這樣我就可以清空 div 並在單擊重新加載按鈕時重新加載組件。

Answer 1

看起來你所做的不是標准的，你必須在你的 web 應用程序中為你的 react 組件創建一個容器，然后像這樣編寫你的組件：

const rc = React.createElement;

class ReactExample extends React.Component {    
  render() {
    return rc(
      'button',
      { onClick: () => alert("Hello from ReactJS!") },
      'say hi'
    );
  }
}

ReactDOM.render(rc(ReactExample), document.querySelector('#reactContainer'));

將其保存在 js 文件中，然后將其導入您的 HTML 頁面。

注意：如果需要，可以使用 JSX，但必須使用babel轉換 JSX。

最后，導入react ：

用於生產：

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

開發：

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>