ホームページ > 記事 > ウェブフロントエンド > Reactで要素を作成する方法は何ですか
React で要素を作成する方法: 1. JSX 構文を使用して、「const element =
Hello, world
;」などの構文で React 要素を作成します。 2.「React」を通じて.createElement( type,props,children)」構文を使用して React 要素を作成します。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
react で要素を作成する方法は何ですか?
#反応要素の作成
レンダリング プロセス: 要素記述の仮想 DOM に反応し、仮想 DOM に基づいて実際の DOM をレンダリングします。
要素は、DOM ノードまたは React コンポーネントを記述するために使用される純粋なオブジェクトです。要素には、独自の属性内に他の要素を含めることができます。要素の作成コストは非常に低く、要素は一度作成されると変更されません。 例: JSX 構文を使用して React 要素 element を作成します仮想 DOM: js オブジェクト構造を使用して html の dom 構造をシミュレートします。バッチの追加、削除、変更、クエリの場合、js オブジェクトは最初に直接操作され、最後に実際の DOM に更新されます。 DOM ツリー。 js オブジェクトを直接操作する方が、DOM を操作する API よりも高速であるためです。
React 要素は js オブジェクトであり、ページに表示する内容を React に指示します。
- 一般:
const element = <h1 className='greeting'>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 要素を作成するメソッド
const element = <h1>Hello, world</h1>;
react ネイティブ コンポーネント: React.Fragment など)
React.createElement(type,props,children)## をネストし続けることもできます。 #。
Children は React.createElement list
にすることも、複数のパラメーターとして記述することもできます:
<script type="text/babel"> 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で要素を作成する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。