Reactで要素を作成する方法は何ですか

React で要素を作成する方法: 1. JSX 構文を使用して、「const element =

Hello, world

;」などの構文で React 要素を作成します。 2.「React」を通じて.createElement( type,props,children)」構文を使用して React 要素を作成します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で要素を作成する方法は何ですか?

#反応要素の作成

# # React 要素

React 要素 (React 要素) は、React における最小の基本単位です。 React 要素は、実際には単純な JavaScript オブジェクト (一般に仮想 DOM として知られています) であり、インターフェイス上の DOM の一部に対応し、DOM のこの部分の構造とレンダリング効果を記述します。

React 要素は実際の DOM 要素ではないため、DOM 上のネイティブ API を直接呼び出す方法はありません。

レンダリング プロセス: 要素記述の仮想 DOM に反応し、仮想 DOM に基づいて実際の DOM をレンダリングします。

仮想 DOM: js オブジェクト構造を使用して html の dom 構造をシミュレートします。バッチの追加、削除、変更、クエリの場合、js オブジェクトは最初に直接操作され、最後に実際の DOM に更新されます。 DOM ツリー。 js オブジェクトを直接操作する方が、DOM を操作する API よりも高速であるためです。

React 要素は js オブジェクトであり、ページに表示する内容を React に指示します。
• 一般:

要素は、DOM ノードまたは React コンポーネントを記述するために使用される純粋なオブジェクトです。要素には、独自の属性内に他の要素を含めることができます。要素の作成コストは非常に低く、要素は一度作成されると変更されません。

例: JSX 構文を使用して React 要素 element を作成します

const element = <h1 id="Hello-world">Hello, world</h1>;

コンパイル プロセス中に、JSX は React.createElement() への呼び出しにコンパイルされます。上記の例の場合:

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

最後に、要素の値は次のような js オブジェクトにコンパイルされます

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }，
    _context: Object,
    _owner: null,
    key: null,  
    ref: null, 
}

React 要素を作成するメソッド

1.JSX 構文を使用する

const element = <h1 id="Hello-world">Hello, world</h1>;

2.React.createElement(type,props,children)

構文パラメーターの説明

type: h1、div、p などの要素のタイプを示します。

文字列 (div、p、h1 など)

• コンポーネント (
カスタム コンポーネント
• ) : 構築関数によって作成されたコンポーネント、またはクラスによって作成されたコンポーネント;

  react ネイティブ コンポーネント: React.Fragment など)

  #props: 要素の属性を表します、JavaScript オブジェクトを使用します。

children を表す方法: 要素内のコンテンツを表します。テキストにすることも、別の

React.createElement(type,props,children)## をネストし続けることもできます。 ＃。

Children は React.createElement list にすることも、複数のパラメーターとして記述することもできます:

  <script>
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);

    ReactDOM.render(
        content,
        document.getElementById("example")
    );
    //或者
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},child1,child2);

    ReactDOM.render(
        content,
        document.getElementById("example")
    ); 
  </script>

React.createElement はインスタンス オブジェクトのプロパティを返します

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)

は次の学習を推奨しています:「

react ビデオ チュートリアル 」

以上がReactで要素を作成する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。