将多个 React 组件导入 html答案

【问题标题】：Importing multiple React components into html将多个 React 组件导入 html
【发布时间】：2020-02-17 15:21:04
【问题描述】：

我正在尝试将一些 React 代码注入 HTML 文档。我正在关注 React 自己的文档并将他们的启动代码（一个简单的类似按钮）输入到页面中。一切都很好。我将其更改为使用 JSX，将其更改为使用钩子的功能组件，而不是具有状态的类组件。没问题。

但是，每当我包含 import 调用并尝试引入另一个组件时，该组件会在页面上中断并停止显示，但不会抛出任何我能看到的错误。

如何在将组件和模块化注入到 html 页面中时，以“react-y”的方式进行开发？

这是我目前正在使用的代码：

HTML 文档

<body>
  <div id="react-root"></div>

  <!-- inject react, reactDOM and JSX engine -->
  <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>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- point to component -->
  <script src="transpiled/app.js"></script>
</body>

反应组件

'use strict';
import {SecondComponent} from './components/SecondComponent';

const e = React.createElement;

const LikeButton = () => {
  const [liked, setLiked] = React.useState(false);

  if (liked) return 'You liked this functional component.'

  const handleLikeClick = () => {
    setLiked(true);
  }

  return (
    <div>
      <button onClick={handleLikeClick}>new like button with jsx</button>
      {liked && <SecondComponent/>}
    </div>
  )
}

const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);

就像我说的那样，任何类型的 import 语句似乎都会出现中断。在网上找不到有关它的资源。提前感谢您的帮助！

【问题讨论】：

如果我理解正确，您是在尝试在常规 JS 脚本文件 (app.js) 中使用常规 import 语句？
是的，没错
你试过import React from "react"吗？

标签： html reactjs jsx

【解决方案1】：

更新：经过一番研究，现在可以在多个 <script> 标记之间导入模块。

这可以通过添加 Babel 插件属性 data-plugins 并将值设置为 "transform-es2015-modules-umd" 来实现，这将启用 UMD 模式。

您还需要在每个<script> 标签上设置type="text/babel"。

这将允许您直接在每个文件中使用import 语句。像这样：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
  <script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>

</html>

Working Gist Example

【讨论】：