javascript - Manipulasi DOM maya dalam komponen tindak balas

Question

Penjelasan: Saya seorang pemula reactJS
Keperluan adalah seperti berikut:
1 react component aa.jsx

    var React = require('react');
    var aaa = React.createClass({
        render: function(){
            return (
                <p ref="username" className="comment2">
                    aaaaaaaaa
                </p>
            );
        }
    });
    module.exports = aaa;

2. komponen tindak balas bb.jsx

    var React = require('react');
    var aaa = React.createClass({
        render: function(){
            return (
                <p ref="username" className="comment3">
                    bbbbbbbbbbbbbbb
                </p>
            );
        }
    });
    module.exports = bbb;

3 Pintu masuk utama react, main.jsx, perlu memuatkan komponen yang diperlukan berdasarkan fail json

.

    json ={
            "data" : [
                {
                    "page" : "aa"
                },
                {
                    "page" : "bb"
                },
                {
                    "page" : "cc"
                }
            ]
        }
    在主函数这里 我用了一个for 循环 
    for (var i=0 ; i< data.length ; i++){
        var page = require('./components/'+ data[i]['page'] +'.jsx');
   }
   

Tetapi masalahnya, halaman di sini adalah semua fungsi. Cara untuk mengeluarkan blok dom (elemen p) dan menambahkannya pada elemen dom yang ditentukan pada halaman index.html satu demi satu.

Answer 1

Pertama sekali, apa yang saya tidak faham ialah, memandangkan aa.jsx dan bb.jsx anda sangat serupa, mengapa anda menulis dua daripadanya (sudah tentu, mungkin anda menulis contoh untuk kemudahan). Memandangkan ia adalah berbilang fail yang berbeza, ia adalah komponen React yang berbeza Jika anda hanya mahu memaparkan kesemuanya di bawah DOM tertentu, letakkan sahaja ia terus ke dalam tatasusunan.

Saya belum menguji kod di bawah, tetapi ia sepatutnya berfungsi

const components = [];
for (var i=0 ; i< data.length ; i++){
    var Page = require('./components/'+ data[i]['page'] +'.jsx');
    components.push(<Page />);
}

Tempat untuk membenamkan, kod JSX

<FatherComponent>
    {components}
</FatherComponent>

Jika anda ingin mengemas kini pada bila-bila masa, hanya render semula, anda boleh menggunakan this.state.components

Anda boleh melihat dokumentasi React kami yang telah diterjemahkan

Answer 2

Ini tiada kaitan dengan dom maya Walaupun saya tidak tahu mengapa anda menggunakannya dengan cara ini~ tetapi adalah salah jika anda menggunakannya dengan cara ini.