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 (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=&#39;greeting&#39;>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, 
}

Kaedah untuk mencipta Elemen bertindak balas

1 Gunakan sintaks JSX

const element = <h1>Hello, world</h1>;

2 🎜> Perihalan parameter sintaks

jenis: Menunjukkan jenis elemen, seperti: h1, div, p, dsb. Boleh menjadi

rentetan (seperti div, p, h1...)
komponen (
• : komponen atau kelas yang dicipta oleh pembina Membuat komponen;

  : React.Fragment, dsb.) 自定义组件react 原生组件

props: mewakili atribut pada elemen, dinyatakan menggunakan objek JavaScript

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

, atau boleh ditulis sebagai berbilang parameter:

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>

React.createElement mengembalikan sifat objek contoh Pembelajaran yang disyorkan: "

tutorial video bertindak balas

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!