关于javascript：为什么不将JSX保存为const渲染


Why isn't JSX saved as a const rendering

我对React＆amp; 但是JSX的印象是你可以将JSX保存为几乎任何东西(var，const，let ......)。

但是当我将它保存为const并尝试渲染它时：

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import ReactDOM from 'react-dom';

const Test =   hi ;

ReactDOM.render((
   
        <Test />
   
), 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时：

1
const Test = () => { return(  hi  ) };

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

你可以使用第一个，但在这种情况下它不是一个React组件，它只是一个引用创建div的结果的变量，所以这样呈现：

1
2
3
4
5
6
7
const Test =   hi ;

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

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

1
const Test = () => { return(  hi  ) };

然后你可以用它作为。

有关JSX的更多详细信息，请查看DOC。

理解这一点的简单方法 - 看看JSX编译的内容：

1
2
3
4
5
6
7
8
9
10
11
var Test = React.createElement(
  'div',
  null,
  ' hi '
);

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

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

1
2
3
4
5
6
7
const test = hi;

ReactDOM.render((
 
    {test}
 
), document.getElementById('root'));

编译到这个：

1
2
3
4
5
6
7
8
9
10
11
var test = React.createElement(
  'div',
  null,
  'hi'
);

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

你没有创建React.Component

1
  const Test =   hi ;

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

1
2
3
4
5
 ReactDOM.render((
     
        {Test}
     
    ), document.getElementById('root'));

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

Test不是组件，因此您需要使用{Test}而不是进行渲染

相关讨论