首页 文章

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

提问于
浏览 次
3

我对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> ) };

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

javascript reactjs jsx

4 回答

  • 4

    你没有创建React.Component

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

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

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

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

    回复于
  • 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 .

    回复于
  • 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'));
    回复于
  • -1

    Test 不是组件，因此您需要使用 {Test} 而不是 <Test /> 渲染它

    回复于

相关问题