javascript - 为什么 JSX 不保存为 const 渲染

Question

我是 React 和 JSX 的新手，但我的印象是您可以将 JSX 保存为几乎任何东西(var、const、let...)。

然而，当我将它保存为 const 并尝试像这样渲染它时:

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

const Test =  <div> hi </div>;

ReactDOM.render((
    <div>
        <Test />
    </div>
), document.getElementById('root'));

我收到错误信息:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

当我用以下内容替换测试常量时:

const Test = () => { return( <div> hi </div> ) };

它没有问题。为什么我不能使用第一个版本？

Answer 1

你可以使用第一个，但在那种情况下它不是 React 组件，它只是一个引用创建 div 的结果的变量。 ，所以像这样渲染它:

const Test =  <div> hi </div>;

ReactDOM.render((
    <div>
       {Test}          //here
    </div>
), document.getElementById('root'));

或者，要使其成为无状态功能组件 (SFC)，请将其编写为返回 div 的函数。 :

const Test = () => { return( <div> hi </div> ) };

然后您可以将其用作<Test /> .

检查 DOC 有关 JSX 的更多详细信息。