リアクト・プロップス - リアクト・バーナキュラー・キャンペーン 09

リアクト・プロップス - リアクト・バーナキュラー・キャンペーン 09

序文

Reactプロジェクトの構築 - React Vernacularキャンペーン08 Reactプロジェクトをビルドする方法を紹介します:ビルド環境、ビルドプロジェクト、プロジェクトの開始。

この記事では、Reactの構文について詳しく説明する。 React JSX - Reactホワイトペーパーキャンペーン06 Reactコンポーネントを構築する方法を学び、コンポーネントには親子関係があることを学びます。この記事では、React Propsの概念について紹介します。

リアクト・コンポーネント宣言

Reactコンポーネントと宣言の構文について、前回のJSXの記事の構文を使って説明しよう。

				
					import React from 'react'; import ReactDOM from 'react-dom/client'; /ul> ); const root = ReactDOM.createRoot(document.getElementById('root'));
				
			

上のコードからわかるように、myElementという要素が最初に宣言され、ルートでレンダリングされる。しかし、1つのファイルでレンダリングするだけでなく、別のファイルから書き込まれた要素を読み込むことも可能です。

まず、上記のファイルを修正してapp.jsという名前にする。また、fruit.jsxというコンポーネントを宣言したが、これは2通りの方法で宣言する。

app.js

				
					import React, { Component } from 'react'; import Fruit from './fruits'; class App extends Component { render() { return (
            <div classname="App">
                <ul>
                    <fruit fruit_name="banana"/>
                    <fruit fruit_name="apple"/>
                </ul>
            </div>

        ); } } デフォルトのアプリをエクスポートします。
				
			

fruits.jsx

機能宣言

				
					import React from &#039;react&#039; const Fruit = (props) =&gt; { return; <p> これは {props.fruit_name} です。</p>
デフォルトのフルーツをエクスポートします。

				
			

分類

				
					import React from &#039;react&#039; class Fruit extends React.Component { render() { return (
        <p> これは {this.props.fruit_name} です。</p>
      ); } } デフォルトのフルーツをエクスポートします。

				
			

これらの方法はどちらも小道具を渡すのに使えるが、最近では比較的簡単に書ける関数宣言を使うのが一般的だ。

リアクト・コンポーネント、コンポーネント・インスタンス、要素 差異

  1. JSXのReact要素は、HTML要素とJavaScriptで構成される。
  2. コンポーネントは、関数宣言やクラス宣言の戻り値である。
  3. コンポーネント・インスタンス 則是 コンポーネント 的實例。
				
					import React, { Component } from &#039;react&#039;; const Fruit = (props) =&gt; { // Fruit() はコンポーネントの戻り値です <p> これは {props.fruit_name} です。</p> // <p></p> 中身は要素 } const Banana = <fruit fruit_name="banana" /> // バナナはコンポーネントのインスタンスです コンポーネントインスタンスクラス App extends Component { render() { return (
            <div classname="App">
                <ul>
                    {バナナ}
                    <fruit fruit_name="apple" />
                </ul>
            </div>

        ); } } デフォルトのアプリをエクスポートします。

				
			

React Props

親コンポーネントや子コンポーネントにおいて、関数における引数の概念と同様にパラメータ値を渡したい場合は、propsを使用します。しかし、関数で宣言されたコンポーネントとクラスで宣言されたコンポーネントにはいくつかの違いがあります。

機能

関数宣言は引用符に似ているので、外部コンポーネントを使用する場合、パラメータを使用する限りインポートすることができ、関数自体もpropsを使用する限りインポートすることができる。

				
					import React from &#039;react&#039; const Fruit = (props) =&gt; { return; <p> これは {props.fruit_name} です。</p>
デフォルトのフルーツをエクスポートします。
				
			

分類

クラス自体はオブジェクト指向プログラミング言語の概念で、クラスは独自の変数を持ち、小道具は{ this.props.[変数名]}で渡される。

				
					import React from &#039;react&#039; class Fruit extends React.Component { render() { return (
        <p> これは {this.props.fruit_name} です。</p>
      ); } } デフォルトのフルーツをエクスポートします。
				
			

結語

この投稿では、React propsのパラメータ受け渡しの概念について説明しますが、コンポーネントを宣言するさまざまな方法についても説明します。

また、React Components、Componentインスタンス、Elementsの違いについても説明しています。

以上、読者の参考になれば幸いである。

ご意見、ご質問がございましたら、お気軽にコメントをお寄せください!

引用

リアクト・ホワイトペーパー キャンペーン10-リアクト・プロップス

リアクト・ヴァナキュラー・スポーツ・シリーズ

Reactプロジェクトの構築 - React Vernacularキャンペーン08

Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07

React JSX - Reactホワイトペーパーキャンペーン06

リアクトの仕組み - リアクト用語キャンペーン 05

JavaScriptの高度な関数 - React Vernacular キャンペーン 04

JavaScript非同期待ち - React Whitepaper キャンペーン03

JavaScriptのES6オブジェクト - Reactホワイトペーパーキャンペーン02

JavaScript ES6 - Reactホワイトペーパーキャンペーン01

 

投稿メッセージ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ja日本語