React 功能组件不会显示

Question

我最近开始学习 React，今天只是为了记住我学到的东西我决定创建一个包含简单标题标签的 React 组件，但我无法弄清楚为什么它不会显示在浏览器中这是我的代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="include-component.js" ></script>
</body>
</html>

这是我的 React 组件，它位于名为 include-component.js 的文件中：

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

function IncludeComponent() {
    return(
            <TestComponent name="Hello Wolrd"/>
    );
}

function TestComponent(props) {
    return(
     <h1>{props.name}</h1>
    );
}
const app= document.getElementById('app');
ReactDOM.render(<IncludeComponent/>,app);

谁能告诉我为什么我的组件无法呈现？

Answer 1

您必须导入测试组件！！

import TestComponent from './TestComponent';
function App() {
  return (
    <div className="App">
      <TestComponent name='hello world' />
    </div>
  );
}

export default App;

Answer 2

您使用的是 non-compiled 代码和编译代码的混淆组合。你检查过你的控制台了吗？你肯定有错误指导你...

这适用于您没有编译器且 React 和 ReactDOM 将在全球范围内可用的情况：

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

我不建议您尝试这种方法。它是次优的，none 您将在网上看到的资源正在使用它。

然后你这样做：

<script src="include-component.js"></script>

这已经导致异常，因为您在此 JS 文件中使用了 import 语句，但您没有说它 type="module"。普通的JS文件不能使用import语句。

最后你不能像那样导入 React 和 ReactDOM，因为你导入的浏览器版本只有全局变量。

而是用 Create React App:

开始一个项目

npx create-react-app my-app
cd my-app
yarn start

然后开始试验。

为了完整性，您需要使用 babel 进行转换：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
    <script type="text/babel">
      function IncludeComponent() {
        return(
          <TestComponent name="Hello Wolrd"/>
        );
      }

      function TestComponent(props) {
        return(
          <h1>{props.name}</h1>
        );
      }
      const container = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<IncludeComponent/>);
    </script>
</body>
</html>

React 功能组件不会显示

React functional component won't display

render

reactjs