リアクト・プロップス - リアクト・バーナキュラー・キャンペーン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 &#039;react&#039;; import Fruit from &#039;./fruits&#039;; 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>
      ); } } デフォルトのフルーツをエクスポートします。

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

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

JSXのReact要素は、HTML要素とJavaScriptで構成される。
コンポーネントは、関数宣言やクラス宣言の戻り値である。
コンポーネント・インスタンス則是コンポーネント的實例。

				
					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>
      ); } } デフォルトのフルーツをエクスポートします。