目次
2. JSX
JSXの基本的な使い方
- createElement()の問題
- 面倒で簡潔ではない
- 記述された構造が直観的に理解できない
- エレガントではなく、ユーザーエクスペリエンスが低い
JavaScript XMLの略で、JavaScriptコードでXML（HTML）形式のコードを記述することを意味します。
利点: 宣言構文はより直観的であり、HTML と同じ構造をしているため、学習コストが削減され、開発効率が向上します。
JSX は React の中核となるコンテンツです
jsxの使用手順
1. jsx を使用して反応要素を作成する
const title=<h1> こんにちは jsx</h1>
2. 作成した反応要素をレンダリングします
ReactDOM.render(タイトル,ルート)
JSX での JavaScript 式の使用
JS式を埋め込む
データはJSに保存されます
構文: {JavaScript 式}
const name='Jack'
const dv=(
<div>你好，我叫：{name}</div>
)import React from 'react'
import ReactDOM from 'react-dom'
const name = 'user'
const age=8
const title = (
<h1>
hello ,{name},年龄：{ age}
</h1>
)
ReactDOM.render(title,document.getElementById('root'))
注意点
1. React 要素の属性名にはキャメルケースの名前が使用されます
2. 特別な属性名: class-->className
の場合--->htmlの場合
tabindex---->tabIndex
3. 子ノードのない React 要素は /> で終わることができます。
4. 推奨事項: JS に自動的にセミコロンが挿入される罠を避けるために、かっこを使用して JSX をラップします。
import React from 'react'
import ReactDOM from 'react-dom'
const name = 'user'
const age=8
const title = (
<h1 className='title'>
hello ,{name},年龄：{age},<span/>
</h1>
)
ReactDOM.render(title,document.getElementById('root'))
JSX を使用した条件付きレンダリング
シーン: ローディングエフェクト
条件付きレンダリング: 条件に基づいて特定の JSX 構造をレンダリングします。
// 2条件渲染
/**
*if-else实现
* 通过改变isLoading的true和false来改变样式
*/
const isLoading = true
const loadData = () => {
if (isLoading) {
return<div>loading......</div>
}
return <div>数据加载完成，此处显示加载后的数据</div>
}
const title = (
<h1>
条件渲染：
{loadData()}
</h1>
)
ReactDOM.render(title,document.getElementById('root'))条件付きレンダリングは、if-else、三項演算子、または論理 ANDを通じて実行できます。
//三目运算符
const loadData = () => {
return isLoading?(<div>loading...</div>):(<div>数据加载完成，此处显示加载后的数据</div>)
}
return isLoading && (<div>loading...</div>)論理 AND は前の 2 つと同じではありません。論理 AND の表示結果は、スタイルが表示されるかどうかになります。
trueの場合は読み込み中を表示、falseの場合はテキストなし
問題記録
loadData() は定義後にのみ呼び出すことができます
順序が逆の場合は、const の変数昇格がないため、最初に宣言してから呼び出す必要があることが警告されます。
JSXリストのレンダリング
- データのセットをレンダリングしたい場合は、配列のmap()メソッドを使用する必要があります。
- 注: リストをレンダリングするときに key 属性を追加する必要があり、key 属性の値は一意である必要があります。
- 原則: map() によってトラバースされる人は誰でも、その人にキー属性を追加します。
- 注: インデックス番号をキーとして使用することは避けてください。
import React from 'react'
import ReactDOM from 'react-dom'
//列表渲染
const songs = [
{ id: 1, name: '小苹果' },
{ id: 2, name: '光辉岁月' },
{id:3,name:'云烟成雨'},
]
const list = (
<ul>
{/* {songs.map(item => <li>{item.name}</li>)} */
songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)
ReactDOM.render(list,document.getElementById('list1'))通常はindex.jsエントリファイルのコードのみが表示されますが、新しいjsファイルがある場合はインポートする必要があります。
JSXスタイルの処理
1. インラインスタイル
// 行内样式
<h1 style={
{ color: 'red', backgroundColor: 'skyblue' }}>JSX的样式处理</h1>2. クラス名 - className (推奨)
//类名
const list=(
<h1 className='title' style={
{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
)
ReactDOM.render(list,document.getElementById('root'))現在の js ファイルにindex.cssをインポートし、cssファイルにスタイルを記述する必要があります。
そして、現在のファイルはreactのjsエントリーファイルではないので、index.jsに現在のjsをインポートします。
要約する
- JSX は React の中核となるコンテンツです
- JSX とは、React ステートメントを具体化した JS コードで HTML 構造を記述することを意味します。
- JSX を埋め込み JS 式、条件付きレンダリング、リスト レンダリングとともに使用して、UI 構造を記述します。
- JSX にスタイルを追加するには className を使用することをお勧めします
- React は、HTML 機能を強化するホイールを構築するのではなく、JS 言語自体の機能を最大限に活用して UI を作成します。