Hello, world;" 2. Melalui "React.createElement(type, props, kanak-kanak)" Sintaks untuk mencipta elemen React."/> Hello, world;" 2. Melalui "React.createElement(type, props, kanak-kanak)" Sintaks untuk mencipta elemen React.">
Rumah > Artikel > hujung hadapan web > Apakah kaedah untuk mencipta elemen dalam tindak balas
Cara mencipta elemen dalam bertindak balas: 1. Gunakan sintaks JSX untuk mencipta elemen React, dengan sintaks seperti "elemen const =
Hello, world
;" 2. Melalui "React .createElement( type,props,children)" sintaks untuk mencipta elemen React.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Apakah cara untuk mencipta unsur sebagai tindak balas?
Buat unsur tindak balas
Elemen tindak balas (elemen tindak balas), iaitu unit asas terkecil dalam React. Elemen React sebenarnya ialah objek JavaScript yang ringkas (biasanya dikenali sebagai: DOM maya A React elemen sepadan dengan sebahagian daripada DOM pada antara muka, menerangkan struktur dan kesan pemaparan bahagian DOM ini.
Elemen tindak balas bukan elemen DOM sebenar, jadi tiada cara untuk memanggil API asli secara langsung pada DOM.
Proses pemaparan: Bertindak balas perihalan elemen DOM maya, dan kemudian jadikan DOM sebenar berdasarkan DOM maya.
- DOM maya: Ia menggunakan struktur objek js untuk mensimulasikan struktur dom dalam html Untuk penambahan kelompok, pemadaman, pengubahsuaian dan pertanyaan, objek js dimanipulasi secara langsung terlebih dahulu, dan akhirnya dikemas kini kepada yang sebenar. pokok DOM. Kerana mengendalikan objek js secara langsung adalah lebih pantas daripada API yang mengendalikan DOM.
- Elemen tindak balas ialah objek js, yang memberitahu React perkara yang anda mahu paparkan pada halaman.
Secara umum:
elemen ialah objek tulen yang digunakan untuk menerangkan nod DOM atau komponen React. Elemen boleh mengandungi elemen lain dalam atribut mereka sendiri. Kos untuk mencipta elemen adalah sangat rendah Setelah elemen dicipta, ia tidak pernah berubah.
Contohnya: Kami menggunakan sintaks JSX untuk mencipta elemen elemen React
const element = <h1 className='greeting'>Hello, world</h1>;
Semasa proses penyusunan, JSX akan disusun menjadi panggilan ke React.createElement(). disusun Hasilnya ialah:
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
Akhir sekali, nilai elemen akan disusun menjadi objek js serupa dengan yang berikut
const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' }, _context: Object, _owner: null, key: null, ref: null, }
const element = <h1>Hello, world</h1>;
jenis: Menunjukkan jenis elemen, seperti: h1, div, p, dsb. Boleh menjadi
: React.Fragment, dsb.) 自定义组件
react 原生组件
children: represents Kandungan di dalam elemen boleh berupa teks atau ia boleh terus bersarang
yang lain.React.createElement(type,props,children)
di mana kanak-kanak boleh menjadi satu
React.createElement 列表
<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>
const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)"
Atas ialah kandungan terperinci Apakah kaedah untuk mencipta elemen dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!