为什么不将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无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.

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

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 />.

有关JSX的更多详细信息,请查看DOC.

Answer 2

您没有创建 React.Component

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

所以你不能用 实例化它<Test \>。如果将渲染更改为

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

它会起作用的。有关如何创建 React.Component 的信息，请参阅React 指南。