JavaScriptのReactフレームワークでJSXの構文を学ぶ入門チュートリアル

JavaScriptのReactフレームワークでJSXの構文を学ぶ入門チュートリアル_基礎知識

WBOY

リリース： 2016-05-16 15:12:15

オリジナル

1910 人が閲覧しました

JSX とは何ですか?

React でコンポーネントを記述する場合、通常は JSX 構文が使用されます。一見すると、XML タグが Javascript コードに直接記述されているように見えますが、実際には、これはすべての XML タグが JSX 変換ツールになります。もちろん、純粋な Javascript コードで直接記述することもできますが、JSX を使用すると、コンポーネントの構造とコンポーネント間の関係がより明確になります。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

ログイン後にコピー

などの XML タグは、JSX 変換ツールによって何に変換されますか?

例:

var Nav = React.createClass({/*...*/});
var app = <Nav color="blue"><Profile>click</Profile></Nav>;

ログイン後にコピー

は次のように変換されます:

var Nav = React.createClass({/*...*/});
var app = React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

ログイン後にコピー

言い換えると、XML タグを記述するときは、基本的に React.createElement メソッドを呼び出して ReactElement オブジェクトを返します。

ReactElement createElement(
 string/ReactClass type,
 [object props],
 [children ...]
)

ログイン後にコピー

このメソッドの最初のパラメータは、HTML 標準内の要素を表す文字列、または前にカプセル化したカスタムコンポーネントを表す ReactClass 型のオブジェクトにすることができます。 2 番目のパラメーターは、この要素のすべての固有属性 (つまり、渡された後に基本的に変更されない値) を保存するオブジェクトまたはディクショナリです。 3 番目のパラメーターから始まり、後続のパラメーターは要素の子要素とみなされます。

JSX コンバータ

JSX 構文のコードを純粋な Javascript コードに変換するには、さまざまな方法があります。インラインコードや HTML コード、または変換されていない外部ファイルの場合は、script タグに type="text" を追加する必要があります。ただし、この方法は実稼働環境での使用はお勧めできません。オンラインになる前にコードを変換することをお勧めします。

npm install -g react-tools

ログイン後にコピー

そして、コマンドラインツールを使用して変換します (具体的な使用法については、jsx -h を参照してください):

jsx src/ build/

ログイン後にコピー

gulp などの自動化ツールを使用する場合は、対応するプラグイン gulp-react を使用できます。

HTML テンプレートでの JS の使用

HTML テンプレートで JS を使用すると、JS コードを波括弧で囲むだけで非常に便利です。

var names = ['Alice', 'Emily', 'Kate']; 
 
React.render( 
<div> 
{ 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
);

ログイン後にコピー

コンパイルすると次のようになります:

var names = ['Alice', 'Emily', 'Kate']; 
React.render( 
 React.createElement("div", null, names.map(function (name) { 
 return React.createElement("div", null, "Hello, ", name, "!") 
 }) ), 
 document.getElementById('example') 
);

ログイン後にコピー

中括弧は実際には変数出力式であることに注意してください。JSX は最終的に中括弧内の内容を React.createElement の 3 番目のパラメーターとして直接渡します (変更せずに直接渡されます)。の式を入れることができ、第 3 パラメータとして直接使用できない書き方は誤りであるため、次のような書き方は誤りです。

React.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>Hello, {name}!</div> 
}) 
} 
</div>, 
document.getElementById('example') 
);

ログイン後にコピー

中括弧内の内容が 3 番目のパラメーターに直接配置されているのは明らかであり、構文が間違っているためです。

これも間違っています:

React.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getElementById('example') 
);

ログイン後にコピー

React.createElement(“div”, null, var a = 1;) は構文エラーであるためです。
そうすれば、中括弧内の js 式がセミコロンで終わることができない理由も理解できます。

属性に JS 変数を出力する場合、引用符を追加することはできないことに注意してください。引用符を追加しないと文字列として扱われ、解析されません。
次のようになります:

<a title={title}>链接</a>

ログイン後にコピー

HTML タグを使用する

HTML 標準に存在する要素を作成するには、HTML コードを直接記述するだけです。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

ログイン後にコピー

ただし、JSX 構文の class と for の 2 つの属性は最終的に純粋な Javascript に変換されるため、className と htmlFor は Javascript DOM と同様に使用する必要があることに注意してください。

もう 1 つのポイントは、HTML 標準内で要素を作成する場合、JSX コンバータはこれらの非標準属性を破棄するため、カスタム属性を追加する必要がある場合は、これらのカスタム属性の前に data- プレフィックスを追加する必要があります。

<div data-custom-attribute="foo" />

ログイン後にコピー

名前空間コンポーネント

たとえば、コンポーネントを開発するときに、コンポーネントに複数のサブコンポーネントがある場合、これらのサブコンポーネントを親コンポーネントの属性として使用する場合は、次のように使用できます。

var Form = MyFormComponent;

var App = (
 <Form>
 <Form.Row>
  <Form.Label />
  <Form.Input />
 </Form.Row>
 </Form>
);

ログイン後にコピー

この方法では、子コンポーネントの ReactClass を親コンポーネントのプロパティとして設定するだけで済みます:

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

ログイン後にコピー

子要素の作成は JSX コンバーターに直接渡すことができます:

var App = (
 React.createElement(Form, null,
  React.createElement(Form.Row, null,
   React.createElement(Form.Label, null),
   React.createElement(Form.Input, null)
  )
 )
);

ログイン後にコピー

この機能にはバージョン 0.11 以降が必要です

JavaScript 式

JSX 構文で Javascript 式を記述するには、三項演算子を使用した次の例のように、{} を使用するだけで済みます。

// Input (JSX):
var content = <Container>{window.isLoggedIn &#63; <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
 Container,
 null,
 window.isLoggedIn &#63; React.createElement(Nav) : React.createElement(Login)
);

ログイン後にコピー

ただし、JSX 構文は単なる構文シュガーであることに注意してください。その背後では ReactElement のコンストラクターメソッド React.createElement が呼び出されるため、次のような記述は許可されません。

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

ログイン後にコピー

変換された Javascript コードには明らかな構文エラーが見られるため、三項演算子を使用するか、次のように記述します。

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

ログイン後にコピー

传播属性（Spread Attributes）

在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

ログイン後にコピー

这样就相当于：

var component = <Component foo={x} bar={y} />

ログイン後にコピー

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

ログイン後にコピー