reactjs - วิธีส่งองค์ประกอบ DOM ที่สร้างโดยจาวาสคริปต์ไปยังฟังก์ชันการเรนเดอร์ของ React

ฉันเป็นมือใหม่กับ React ฉันกำลังพยายามสร้างคอมโพเนนต์ชื่อ StationBrowserForHome (TSX) ในฟังก์ชัน render() ฉันต้องการแสดงองค์ประกอบ DOM ที่มีลักษณะดังนี้:

<div class = "big-group">
 <div class = "small-group>
   <div class="item"></item>
   <div class="item"></item>
   ...
   <div class="item"></item>
 </div>
 <div class = "small-group>
   <div class="item"></item>
   <div class="item"></item>
   ...
   <div class="item"></item>
 </div>
 ...
</div>

ดังนั้นฉันจึงพยายามสร้าง DOM tree นั้นใน componentWillMount(), ตั้งมันเป็นตัวแปร state ชื่อ "divItems" และใน render() ฉันก็ดึงมันมา

export class StationBrowserForHome extends Component <{}, any> {
    componentWillMount (){
        var divItems = document.createElement("div");
        var divSeven = document.createElement("div");

        for (var i = 0; i < 7; i++) {
            var singleItem = document.createElement('<div className="station-item"><div className="row"><StationBrowserItemInfo/></div><div className="row station-name">Station {i}</div></div>');
            divSeven.appendChild(singleItem);
            console.log("singleItem: "+singleItem);
            console.log("divSeven: "+divSeven);

        }
        divItems.appendChild(divSeven);
        this.setState({divItems:divItems});
    }

    render() {

        return (
            <div className="container-fluid text-center browser">
                <div className="cover-div">
                    <ArrowButton/>
                    <div className="text-center list-station" id="station-browser">
                        { this.state.divItems }
                    </div>
                </div>
            </div>
        );
  }
}

และฉันได้รับข้อความข้อผิดพลาดนี้:

VM19339 invariant.js:42 เกิดข้อผิดพลาดไม่ถูกต้อง: อ็อบเจ็กต์ไม่สามารถใช้เป็น React child ได้ (พบ: [object HTMLDivElement]) หากคุณต้องการแสดงคอลเลคชันของ children ให้ใช้ array แทน

ความช่วยเหลือใด ๆ ก็จะได้รับการชื่นชม!

คำตอบ #1

React นั้นยอดเยี่ยมเพราะคุณสามารถแยกสิ่งต่าง ๆ ออกเป็นคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ โค้ดนี้ค่อนข้างขัดกับความหมายทั้งหมดของ React

ทุกอย่างใน componentWillMount ควรอยู่ภายในคอมโพเนนต์ที่มี props numberOfItems ตัวอย่างเช่น และจากนั้นตามนั้นคุณจะเรนเดอร์สิ่งที่ดูเหมือนว่าจะเป็นสถานีไอเท็มสำหรับฉัน

export class StationList extends React.Component<{stations: IStation[]}, {}> {
  render() {
    return (
       <div className='stations'>
         {this.getStationItems}
       </div>
    );
  }

  private getStationItems() {
     const itemsDiv = this.props.stations.map((station, index) => {
       return (
          <div className='station'>
            //........
            // other stuff here
          </div>
       )
     });
     return itemsDiv;

  }
}

จากนั้นกลับไปที่คอมโพเนนต์ StationBrowserForHome เราก็แค่:

    const stations: IStation[] = [
       {
          id: 'station1',
          purpose: 'purpose1'
       },
       {
          id: 'station2',
          purpose: 'purpose2'
       }
    ];

    return (
        <div className="container-fluid text-center browser">
            <div className="cover-div">
                <ArrowButton/>
                <div className="text-center list-station" id="station-browser">

                    <StationList stations={stations} />
                </div>
            </div>
        </div>
    );

โค้ดด้านบนเป็นแค่เทมเพลตทั่วไปไม่ใช่ในหน้าต่าง IDE แต่ก็เป็นแนวคิดพื้นฐาน

คำตอบ #2

ทำไมคุณถึงใช้วิธีนี้ คุณสามารถสร้างองค์ประกอบด้วย JSX ได้อย่างง่ายดายแบบนี้

componentWillMount() {
  let ele = <div> </div>;
  }

และถ้าคุณต้องการวนลูปกับ element หรือทำงานใด ๆ บนมัน คุณสามารถใช้ฟังก์ชัน map (เมธอดสำหรับการวนลูปใน javascript เช่น foreach) แบบนี้

componentWillMount() {
   this.state.count.map( (e) => ( ... ) )
  }

ในตัวอย่างข้างต้น พารามิเตอร์ e อ้างอิงไปที่วัตถุของคุณเป็นตัวอย่าง

  constructor(props) {
     super(props);
     this.state = {
       data:[ 
        {
           id:1,
           name:'hamid'
         },
         {
           id:2,
           name:'mat'
         },
         {
           id:3,
           name:'sara'
         }

        ]    
       }

    this.state.data.map( (item) => (

        <li key={item.id} > {item.name} </li>       

     ));

คุณมีสิ่งนี้ใน DOM ของคุณ

   <li>hamid</li>
   <li>mat</li>
   <li>sara</li>

และคุณต้องตั้งค่าแอตทริบิวต์ key ในองค์ประกอบรากระดับบนสุดภายในฟังก์ชัน map และนี่ต้องไม่ซ้ำกันสำหรับแต่ละรายการ