Question

我对React＆amp; amp; 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无效 - 期望一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。

当我用以下代码替换测试const时：

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

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

Answer 1

理解这一点的简便方法 - look at what the JSX compiles into：

var Test = React.createElement(
  'div',
  null,
  ' hi '
);

ReactDOM.render(React.createElement(
  'div',
  null,
  React.createElement(Test, null)
), document.getElementById('root'));

您正在将已创建的元素实例再次传递给createElement函数 - 而只需渲染现有实例：

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

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

Which compiles to this:

var test = React.createElement(
  'div',
  null,
  'hi'
);

ReactDOM.render(React.createElement(
  'div',
  null,
  test
), document.getElementById('root'));

Answer 2

Test不是一个组件，因此您需要使用{Test}代替<Test />

进行渲染

为什么不将JSX保存为const渲染

2 个答案: