为什么不把JSX保存为一个const渲染

我对React & JSX相当陌生，但我的印象是你可以将JSX保存为几乎任何东西（var，const，let ...）。为什么不把JSX保存为一个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：类型无效 - 预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：object。

当我用下面的替换测试常量：

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

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

来源

2017-08-11 Will Mayger

你并没对

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

创建React.Component所以你不能用<Test \>实例化。如果您将渲染更改为

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

它会工作。有关如何创建React.Component，请参见React guide。

来源

2017-08-11 09:04:48

您可以使用第一个，但在这种情况下，将不是一个阵营组成部分，它只是引用创建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的更多详细信息。

来源

2017-08-11 09:05:02

-1

Test不是一个组成部分，所以你需要使用的{Test}代替<Test />

来源

2017-08-11 09:05:37 DrunkDevKek

如果你的答案**不会从其他人的不同**，不是，它只是污染... – Hitmands

实际上，当其他答案尚未发布时我写了它，或者在我回答时发布。但我显然同意你的看法。 – DrunkDevKek

简单的方法，以使其明白这一点 - 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'));

来源

2017-08-11 09:06:26

为什么不把JSX保存为一个const渲染

回答

相关问题