javascript - 大写的 React Element 抛出 Element type is invalid - 为什么？

Question

我正在尝试使用 React 创建自定义标签，如下所示:

// imports

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

// ========================================

// classes & functions

const Home = <Home></Home>;

// ========================================

// exports

ReactDOM.render(
  Home,
  document.getElementById('root')
);

<Home></Home>抛出错误Element type is invalid .

将其更改为 <home></home将工作并将在浏览器中呈现此元素，但我得到此标志:

index.js:2178 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

我猜这与定义 Home 有关。作为变量而不是函数或类？我在这里做错了什么？如何获取元素 <Home></Home>在浏览器中没有错误？

Answer 1

与

const Home = <Home></Home>;

您正在尝试渲染尚未定义的 Home 组件。

第二件事是您尝试重新分配应该提前声明的 Home。

JSX (React) 将 upper-first 标签视为对范围内先前定义的变量/类的引用。

有效的用例可以是:

const Home = () => <div>hello world</div>;

const AnotherComponent = () => <Home></Home>;