React組件沒有函數或類？

有時，我已經看到並寫了一些像這樣的React代碼。React組件沒有函數或類？

const text = (
    <p> 
    Some text 
    </p> 
);

這是行不通的，但是有什麼問題嗎？

我知道我不能使用道具這種方式，但如果我做的是使一些簡單的像一個段落，我不明白爲什麼我需要使它成爲一個功能組件或延長React.Component

我目前的原因是因爲我需要傳遞一個或兩個作爲佔位符文本，我不能只傳遞純文本。

2017-05-30 merlinpatt

我認爲這是最好的方法，因爲你想要最好的性能，而且編寫代碼最短的方式來使用它的方式。你的元素不使用道具，只是一個表象，所以最好儘量保持最小。 – Chris

這不是一個反應組分，它僅僅是在其中JSX存儲一個變量：

const text = (
    <p> 
     Some text 
    </p> 
);

作爲每DOC：

const element = <h1>Hello, world!</h1>;

這個有趣的標籤語法是既不a string或HTML。

它被稱爲JSX，它是JavaScript的語法擴展。我們建議使用它與React來描述UI應該看起來像什麼。 JSX可能會提醒您一種模板語言，但它附帶了JavaScript的全部功能。

props將只提供在陣營部件，無論是在功能部件或基於類組件。

爲什麼需要React如果它不是反應組件？

我們可以將JSX存儲在任何變量中，它將被轉換爲babel，並轉換成React.createElement。

作爲每DOC：

JSX只是提供語法糖爲React.createElement（）函數。

由於JSX編譯爲對React.createElement的調用，因此React 庫也必須始終位於JSX代碼的作用域中。

實施例：當我們寫：

var a = <div> Hello </div>

的這個Result將是：

var a = React.createElement(
    "div", 
    null, 
    " Hello " 
);

2017-05-30 19:46:57

不完全。這是一個反應元素。如果沒有範圍內的「React」，你不能將它賦值給一個變量。 – wesley6j

@ wesley6j檢查更新後的答案:) –

該代碼只是存儲與它裏面的文本段落元素入變量text。它不是一個組件，功能或其他。使用它在一個陣營組件，就像您標準的JavaScript：

render() { 
    return (
     <div className="some-text"> 
      { text } 
     </div> 
    ); 
}

2017-05-30 19:48:02

回答