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 ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? 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'
ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
