機能またはクラスなしの反応成分？

Question

時々、私はこのようないくつかのReactコードを見て書きました。

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

これは問題なく動作しますか？

私は小道具をこのように使用することはできません知っているが、私がやっているすべての段落のような単純なものをレンダリングしている場合、私はそれを機能コンポーネントを作成または拡張する必要があるだろう、なぜ、私は表示されませんReact.Component

私の現在の理由は、プレースホルダーのテキストとして段落または2文字を渡す必要があるため、プレーンテキストで渡すだけではなりません。

Answer 1

これはないコンポーネント反応し、それだけでJSX変数が格納されている：DOC 1として

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

を：

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

この面白いタグの構文はどちらもしませんa でもHTMLでもあります。

JSXと呼ばれ、JavaScriptの構文拡張です。我々は のようにUIをどのように見えるべきかを説明するためにReactと共に使用することを推奨します。 JSXはテンプレート言語を思い出させるかもしれませんが、 JavaScriptのフル機能が付属しています。

props

はが機能コンポーネントまたはクラスベースのコンポーネントのいずれかにおいて、成分を反応させるだけで利用できるようになります。

反応成分でない場合はなぜこれに反応が必要ですか？

任意の変数にJSXを格納することができ、babelによって蒸散され、React.createElementに変換されます。 DOC 1として

：

JSXだけReact.createElement（） 機能のための糖衣構文を提供します。

JSXはReact.createElementの呼び出しをコンパイルするので、React ライブラリも常にJSXコードのスコープ内にある必要があります。

例：私たちは書く：この

var a = <div> Hello </div> 

Resultは次のようになります。

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

Answer 2

このコードは、単に変数textにそれ内のテキストと段落要素を記憶しています。それは、機能的な要素ではない。標準のJavaScriptあなたが希望のようにリアクトコンポーネントでそれを使用します。

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