将多个React组件导入html_Html_Reactjs_Jsx

将多个React组件导入html

html reactjs

将多个React组件导入html,html,reactjs,jsx,Html,Reactjs,Jsx,我正在尝试向HTML文档中注入一些React代码。我遵循React自己的文档，并将其启动程序代码（一个简单的类似按钮）输入页面。一切都很顺利。我将其更改为使用JSX，将其更改为使用挂钩的功能组件，而不是带有状态的类组件。没问题但是，每当我包含一个import调用并尝试引入另一个组件时，该组件就会在页面上中断并停止显示，但不会抛出任何我能看到的错误如何在将组件和模块化注入html页面的同时，以“react-y”的方式进行开发以下是我目前正在使用的代码： HTML文档反应组分 “严格使用

我正在尝试向HTML文档中注入一些React代码。我遵循React自己的文档，并将其启动程序代码（一个简单的类似按钮）输入页面。一切都很顺利。我将其更改为使用JSX，将其更改为使用挂钩的功能组件，而不是带有状态的类组件。没问题

但是，每当我包含一个

import

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

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

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

HTML文档

反应组分

“严格使用”；
从“./components/SecondComponent”导入{SecondComponent}；
const e=React.createElement；
常量LikeButton=（）=>{
const[liked，setLiked]=React.useState（false）；
如果（喜欢）返回“您喜欢此功能组件”
const handlelikelick=（）=>{
（真的）；
}
返回(
使用jsx创建新的like按钮
{喜欢&&}
)
}
const domContainer=document.querySelector（“#react root”）；
render（e（LikeButton），domContainer）；

正如我所说的，任何类型的进口声明似乎都会被打破。无法在网上找到有关它的资源。提前感谢您的帮助

更新：经过一点研究，现在可以在几个

标签之间导入模块

这可以通过添加Babel插件属性

数据插件

并将值设置为

“transform-es2015-modules-umd”

来实现，这将启用该模式

您还需要在每个

标记上设置

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>


反应

如果我理解正确，您正在尝试在常规JS脚本文件（

app.JS

）中使用常规

import

语句？是的，这是正确的，您是否尝试过从“React”导入反应？

'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);

<!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>