在 static html 頁面中包含 React 組件

Question

我正在嘗試將基本反應組件包含到 html 頁面中。 react 應用程序是使用create-react-app

mkdir my_html_app
cd my_html_app
npx create-react-app my_react_app

然后我通過編輯my_html_app/my_react_app/src/App.js使該應用程序成為一個組件

// App.js
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="App">
        This is my react component
      </div>
    );
  }
}

export default App;

然后構建應用程序

npm run build

然后在index.html中創建my_html_app

<html>
<head>
    <script type="text/javascript" src="http://localhost:8000/my_react_app/build/static/js/main.d286e0ff.chunk.js" ></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>
</head>
<body>
    My html app. Expecting to see react component here:
    <div id="my_app"></div>
    <script type="text/javascript">
        var el = React.createElement(App);
        ReactDOM.render(el, document.getElementById("my_app"))
    </script>
</body>
</html>

從那里我可以得到一個錯誤(index):12 Uncaught ReferenceError: App is not defined

我在這里做錯了什么？ 我假設我建錯了。 正確使用該構建文件的步驟是什么？

Answer 1

App 未在您的 index.html 中定義。 您可以做的是創建一個 index.js 文件，導出您的 App 文件，然后在您的 html 文件中，您可以使用 require.js 拉取您的索引並從那里訪問應用程序（require.js 需要安裝在你的節點模塊）：

應用程序的 src 文件夾中的 index.js 文件 (my_html_app/my_react_app/src/index.js)

export App from "./App";

然后像這樣更新您的 html 文件：

<html>
<head>
    <script type="text/javascript" src="http://localhost:8000/my_react_app/build/static/js/main.d286e0ff.chunk.js" ></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>
</head>
<body>
    My html app. Expecting to see react component here:
    <div id="my_app"></div>
    <script type="text/javascript">
        require([string path to your index file], function(Main) {
            var el = React.createElement(Main.App);
            ReactDOM.render(el, document.getElementById("my_app"))
        });
    </script>
</body>
</html>

在 static html 頁面中包含 React 組件

問題描述

1 個解決方案

解決方案1
0 2021-02-12 16:29:55

在 static html 頁面中包含 React 組件

問題描述

1 個解決方案

解決方案1 0 2021-02-12 16:29:55

解決方案1
0 2021-02-12 16:29:55