爲什麼不把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渲染

回答

相關問題