如何在 html 文件中获取反应组件？答案

【问题标题】：How I get react component in html file?如何在 html 文件中获取反应组件？
【发布时间】：2018-09-05 07:39:40
【问题描述】：

我用纯js、css和django制作了网页。
感觉太没效率了于是我尝试使用 React js。但是，当我全部制作简单的反应组件时，有一个问题是我不知道如何在当前的 html 文件上使用该组件。

您能告诉我如何从 main.html 获取“应用程序组件”吗？

main.html

     ...

     <main class="mainPart" style="height: 100%; position: relative; top: 170px; ">
        <div class = "bodyPart" >
           <div id="bodyPartWrapper">

          <script type="text/babel">

           var App = ?????? 'how to get App Component?'

           ReactDOM.render(
              <App />,
               document.getElementById('bodyPartWrapper')
            );

          </script>

           </div>
        </div>
     </main>

     ...

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">title goes here</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
        );
      }
    }
export default App;

【问题讨论】：

标签： javascript reactjs webpack yarnpkg

【解决方案1】：

您可以在没有任何构建管道的情况下使用 react。它可以像任何普通的 JS 库一样实现。

在您的情况下，最简单的解决方案是这样做：

在结束 </body> 标签之前添加这些脚本：

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

在您的 HTML 文件中为元素指定一个 id（您已经这样做了）并添加 React 代码。

<div id="bodyPartWrapper"></div>

<script type="text/babel">
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">title goes here</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
        );
      }
    }

ReactDOM.render(<App />, document.getElementById('bodyPartWrapper'));

</script>

就是这样。 React 只是 JS :)

React Docs 非常好，请查看：https://reactjs.org/

希望对你有帮助！

【讨论】：

感谢您的回复，但我想带来其他反应 js 文件（如 App.js）而不是在 html 文件上创建反应组件。我可以吗？

【解决方案2】：

你在渲染 react 的 div 里面有 script 标签，试着把脚本放到 div 标签外面。

【讨论】：

【解决方案3】：

你必须导入 App 文件并在你想要的 div 中渲染它

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('bodyPartWrapper'));
registerServiceWorker();

你也可以在你的 App.js 文件中添加这个：

import React from 'react';
import ReactDOM from 'react-dom';

//(...)
//this at the end of the file
ReactDOM.render(<App />, document.getElementById('bodyPartWrapper'));

如果你只想导入 App 组件，你可以这样做

import App from './location/to/App'

【讨论】：

在不同的文件中，你使用了 create-react-app 吗？
非常感谢您的回复，我可以在 html 文件上获取 App 组件（不是创建）吗？我想在 html 中导入 react 组件并在 html 中渲染它。
您可以像我在上面的代码中向您展示的那样导入它，但我认为如果您添加这一行并删除 App.js 中的导出，它应该可以像 fineReactDOM.render( , document.getElementById('bodyPartWrapper'));
但是如果你真的想这样导入它： import App from './location/to/App' 然后像这样使用它：
你还必须导入其他的东西： import React from 'react';从 'react-dom' 导入 ReactDOM;