React => JSX

備考

JSXは、JavaScriptにXML構文を追加するプリプロセッサ・ステップです。 ReactをJSXなしで使うことは間違いありませんが、JSXはReactをよりエレガントにします。

XMLと同様に、JSXタグにはタグ名、属性、子があります。属性値が引用符で囲まれている場合、値は文字列です。それ以外の場合は、値を中括弧で囲みます。値は囲まれたJavaScript式です。

基本的に、JSXはReact.createElement(component, props, ...children)関数に構文的な砂糖を提供するだけです。

したがって、次のJSXコード：

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

次のJavaScriptコードにコンパイルします。

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

結論として、 JSXの次の行は文字列でもHTMLでもないことに注意してください。

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

これはJSXと呼ばれ、 JavaScriptの構文拡張です。 JSXはテンプレート言語を思い出させるかもしれませんが、JavaScriptの完全機能を備えています。

Reactチームは、彼らのドキュメントで、UIをどのように見せるべきかを記述することを推奨しています。

JSXの小道具

JSXで小道具を指定する方法はいくつかあります。

JavaScript式

任意のJavaScript式を{}囲んで小道具として渡すことができます 。たとえば、このJSXでは：

<MyComponent count={1 + 2 + 3 + 4} />

MyComponent内部では、式1 + 2 + 3 + 4が評価されるため、 props.countの値は10になります。

If文とforループはJavaScriptの式ではないため、JSXで直接使用することはできません。

文字列リテラル

もちろん、任意のstring literalをpropとして渡すこともできます。これらの2つのJSX式は同等です。

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

文字列リテラルを渡すと、その値はHTMLアンエスケープされます。したがって、これらの2つのJSX式は同等です。

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

この動作は通常適切ではありません。これは、完全性のためにここに記載されています。

小道具デフォルト値

小道具に値を渡さないと、 デフォルト値はtrueになりtrue 。これらの2つのJSX式は同等です。

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

しかし、Reactチームは、 このアプローチを使用しているドキュメントでは、 {foo: true}ではなく{foo: foo}略語であるES6オブジェクトの略語{foo}と混同する可能性があるため推奨していません 。彼らは、この動作がちょうどそこにあり、HTMLの動作にマッチすると言います。

スプレッドアトリビュート

すでにオブジェクトとして小道具を持っていてJSXで渡す場合は、スプレッド演算子として...を使用して小道具オブジェクト全体を渡すことができます。これらの2つのコンポーネントは同等です。

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}

JSXの子供たち

開始タグと終了タグの両方を含むJSX式では、これらのタグ間のコンテンツは特殊なprop： props.childrenとして渡されます。子供を渡すにはいくつかの方法があります：

文字列リテラル

あなたは開始タグと終了タグの間に文字列を置くことができ、 props.childrenはその文字列になります。これは、組み込みのHTML要素の多くに役立ちます。例えば：

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

これは有効なJSXで、MyComponentのprops.childrenは単に<h1>Hello world!</h1>ます。

HTMLはエスケープされていないので、通常はHTMLと同じようにJSXを書くことができます。

これを念頭に置いて、この場合、JSX：

行の先頭と末尾の空白を削除します。
空白行を削除します。
タグに隣接する新しい行が削除されます。
文字列リテラルの途中で発生する新しい行は、単一のスペースに集約されます。

JSXチルドレン

子として、より多くのJSX要素を提供することができます。これはネストされたコンポーネントを表示するのに便利です：

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

さまざまなタイプの子を混在させることができるので、JSXの子と一緒に文字列リテラルを使用できます 。これは、JSXがHTMLのようなもので、有効なJSXと有効なHTMLの両方である別の方法です。

<div>
  <h2>Here is a list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Reactコンポーネントは複数のReact要素を返すことはできませんが、単一のJSX式は複数の子を持つことができます 。したがって、複数の要素をレンダリングする場合は、上記の例のようにdivラップすることができます。

JavaScript式

任意のJavaScript式を{}内に囲んで子として渡すことができます。たとえば、これらの式は等価です。

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

これは、任意の長さのJSX式のリストをレンダリングする場合に便利です。たとえば、次のようにHTMLリストをレンダリングします。

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

JavaScript式は他のタイプの子供と混在することができます。

子供としての機能

通常、JSXに挿入されたJavaScript式は、文字列、React要素、またはそれらのリストに評価されます。しかし、 props.children 、Reactがレンダリングする方法を知っているだけでなく、あらゆる種類のデータを渡すことができる点で、他の小道具と同じように機能します。たとえば、カスタムコンポーネントを使用している場合、 props.childrenとしてコールバックを取ることができます。

const ListOfTenThings = () => (
  <Repeat numTimes={10}>
    {(index) => <div key={index}>This is item {index} in the list</div>}
  </Repeat>
);

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

Reactがレンダリングする前に理解できるものに変換される限り、カスタムコンポーネントに渡された子は何でもかまいません。この使い方は一般的ではありませんが、JSXの機能を拡張したい場合に機能します。

無視される値

false 、 null 、 undefined 、およびtrueが有効な子であることに注意してください。しかし、彼らは単にレンダリングしません。これらのJSX式はすべて同じものにレンダリングされます。

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

これは、React要素を条件付きでレンダリングするのに非常に便利です。このJSXは、 showHeaderがtrueの場合にのみaをレンダリングします。

<div>
  {showHeader && <Header />}
  <Content />
</div>

1つの重要な注意点は、 0番のような「偽の」値のいくつかは依然としてReactによってレンダリングされるということです。たとえば、このコードは、 props.messagesが空の配列の場合に0が出力されるため、期待どおりに動作しません。

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

これを修正する方法の1つは、 &&前の式が常にブール値であることを確認することです。

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

最後に、 false 、 true 、 null 、またはundefinedような値を出力に表示するには、最初に文字列に変換する必要があることに注意してください。

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

React
JSX

サーチ…

備考

JSXの小道具

JavaScript式

文字列リテラル

小道具デフォルト値

スプレッドアトリビュート

JSXの子供たち

文字列リテラル

JSXチルドレン

JavaScript式

子供としての機能

無視される値