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警告：此浏览器无法识别该标签。如果您打算渲染React组件，请以一个大写字母。

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

Answer 1

使用

const Home = <Home></Home>;

您正在尝试呈现Home尚未定义的组件。

第二件事是您正在尝试重新分配应该更早声明的Home。

JSX（React）将高优先级标记视为对之前在该范围中定义的变量/类的引用。

有效的用例可以是：

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

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

Answer 2

您尚未在任何地方定义Home用作<Home>。此外，您在使用该变量时要分配一个名为Home的变量。如果该变量已经存在（<Home>），则无法使用该名称创建变量。

const X = 1; // fine
const X = 2; // error

<Home>意味着创建名为Home的React类的实例，这意味着Home必须已经定义，这意味着您不能为名为{{1}的变量分配任何内容}，因为Home变量必须已经存在。

大写的React Element抛出Element类型无效-为什么？

2 个答案: