1. 関数を使用してコンポーネントを作成する関数コンポーネント: JS 関数 (または矢印関数) を使用して作成されたコンポーネント 規則1: 関数名は大文字で始まる必要があります 規則2: 関数コンポーネントには、コンポーネントの構造を示す戻り値が必要です。 戻り値が null の場合、何もレンダリングされないことを意味します。 関数Hello() { 戻る ( <div>これは私の最初の機能コンポーネントです。 </div> ) } const Hello = () => <div> これは私の最初の関数コンポーネントです。 </div> 関数コンポーネントのレンダリング: 関数名をコンポーネントタグ名として使用します コンポーネントラベルは単一または二重にすることができます //1. reactをインポートする 'react' から React をインポートします。 'react-dom' から ReactDOM をインポートします。 /* 機能コンポーネント: */ 関数Hello() { 戻る ( <div>これは私の最初の機能コンポーネントです。 </div> ) } // レンダリングコンポーネント ReactDOM.render(<Hello />, document.getElementById('root')) 2. クラスを使用してコンポーネントを作成するコンポーネントクラス: ES6クラスを使用して作成されたコンポーネント 規則1: クラス名も大文字で始まる必要があります 規則2: クラスコンポーネントは、親クラスが提供するメソッドやプロパティを使用できるように、React.Component 親クラスを継承する必要があります。 規則3: クラスコンポーネントはrender()メソッドを提供する必要がある 規則4: render() メソッドには、コンポーネントの構造を示す戻り値が必要です。 //1. reactをインポートする 'react' から React をインポートします。 'react-dom' から ReactDOM をインポートします。 /* 機能コンポーネント: */ 関数Hello() { 戻る ( <div>これは私の最初の機能コンポーネントです。 </div> ) } // レンダリングコンポーネント ReactDOM.render(<Hello />, document.getElementById('root')) 3. 独立したJSファイルに抽出する1. Hello.jsを作成する 2. Hello.jsにReactをインポートする 3. コンポーネント(関数またはクラス)を作成する 4. Hello.jsでコンポーネントをエクスポートする 5. index.jsにHelloコンポーネントをインポートする 6. レンダリングコンポーネント こんにちは 「react」からReactをインポートします。 //コンポーネントクラスHelloを作成し、React.Componentを拡張します。 与える () { 戻る ( <div>これは js ファイルに抽出された最初のコンポーネントです。 </div> ) } } //エクスポートコンポーネントエクスポートデフォルトHello インデックス //1. reactをインポートする 'react' から React をインポートします。 'react-dom' から ReactDOM をインポートします。 /* コンポーネントを個別の JS ファイルに抽出します。 */ //Hello コンポーネントをインポートしますimport Hello from './Hello'; // レンダリングコンポーネント ReactDOM.render(<Hello />, document.getElementById('root')) これで、React コンポーネントを作成する 2 つの方法についての記事は終了です。React コンポーネントの作成方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: VMware 仮想マシンで Linux の IP アドレスを表示する方法
1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...
固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりで...
導入MySQL データベースの読み取りと書き込みの分離を設定すると、データベースに対する書き込み操作...
ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...
目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
1. ユーザーを作成します。注文: 'password' によって識別される ...
この記事の例では、Androidの9グリッド画像を表示するための具体的なコードを参考までに共有してい...
1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...
目次1. PXCの紹介1.1 PXC の紹介1.2 PXC の特徴と利点1.3 PXCの限界と欠点1...
ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...
HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...
Centos マシンで docker のインストールが完了したら、docker info コマンドを...
この点呼装置は簡易版であり、自動停止の必要性を考慮していないため、点呼を開始した後、停止ボタンをクリ...
目次1. Vue ライフサイクル2. フック機能2.1 4つの段階と8つの方法に分かれています。 2...