องค์ประกอบหลักและลูกในปฏิกิริยาคืออะไร

ในการเรียกร่วมกันระหว่างส่วนประกอบการตอบสนอง ผู้เรียกจะเรียกว่าองค์ประกอบหลัก และผู้เรียกจะเรียกว่าองค์ประกอบลูก สามารถส่งค่าระหว่างส่วนประกอบหลักและลูกได้: 1. เมื่อองค์ประกอบหลักส่งผ่านค่าไปยังองค์ประกอบลูก ค่าที่จะส่งจะถูกส่งผ่านไปยังองค์ประกอบลูกก่อน จากนั้นในองค์ประกอบลูก อุปกรณ์ประกอบฉากจะถูกใช้ รับค่าที่ส่งผ่านโดยองค์ประกอบหลัก 2. องค์ประกอบลูก เมื่อส่งค่าไปยังองค์ประกอบหลักคุณจะต้องส่งผ่านไปยังองค์ประกอบหลักด้วยวิธีทริกเกอร์

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows7, เวอร์ชัน react18, คอมพิวเตอร์ Dell G3

1. ส่วนประกอบใน React

องค์ประกอบการตอบสนองเป็นแท็กที่ไม่ใช่ html ที่กำหนดด้วยตนเอง โดยกำหนดว่าตัวอักษรตัวแรกขององค์ประกอบการตอบสนองเป็นตัวพิมพ์ใหญ่:

แอพคลาสขยายส่วนประกอบ {}<App />

2. ส่วนประกอบหลักและรอง

เมื่อส่วนประกอบเรียกหากัน ผู้เรียกจะถูกเรียกว่าองค์ประกอบหลัก และผู้เรียกจะถูกเรียกว่าองค์ประกอบลูก:

นำเข้า React จาก 'react'; นำเข้า Children จาก './Children'; class Up ขยาย React.Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); this.state = { } } render () { console.log ("render "); return( <div> up <Children /> </div> ) }}ส่งออกค่าเริ่มต้น Up;import React จาก 'react';class Children ขยาย React.Component{ Constructor(props){ super(props); this. state = { } } render(){ return ( <div> Children </div> ) }}ส่งออกค่าเริ่มต้น Children;

3. องค์ประกอบหลักส่งผ่านค่าไปยังองค์ประกอบลูก

ส่วนประกอบหลักส่งผ่านค่าไปยังส่วนประกอบย่อยโดยใช้อุปกรณ์ประกอบฉาก เมื่อส่วนประกอบหลักส่งผ่านค่าไปยังส่วนประกอบย่อย ค่าที่จะส่งจะถูกส่งผ่านไปยังส่วนประกอบย่อยก่อน จากนั้นในส่วนประกอบย่อย อุปกรณ์ประกอบฉากจะถูกใช้เพื่อรับค่าที่ส่งผ่านโดยส่วนประกอบหลัก

องค์ประกอบหลักกำหนดคุณสมบัติเมื่อเรียกองค์ประกอบลูก:

<Children msg="ส่วนประกอบหลักส่งผ่านค่าไปยังส่วนประกอบย่อย" />

ข้อความค่านี้จะถูกผูกไว้กับแอตทริบิวต์อุปกรณ์ประกอบฉากของส่วนประกอบย่อย และส่วนประกอบย่อยสามารถนำมาใช้โดยตรง:

this.props.msg

ส่วนประกอบหลักสามารถส่งผ่านค่าและวิธีการไปยังส่วนประกอบต่างๆ และยังสามารถส่งผ่านตัวเองไปยังส่วนประกอบย่อยได้อีกด้วย

3.1 ค่าผ่าน

นำเข้า React จาก 'react'; นำเข้า Children จาก './Children'; class Up ขยาย React.Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); this.state = { } } render () { console.log ("render "); return( <div> up <Children msg="องค์ประกอบหลักส่งค่าไปยังองค์ประกอบย่อย" /> </div> ) }}ส่งออกค่าเริ่มต้น Up;import React จาก 'react';class Children ขยาย React.Component{ Constructor (อุปกรณ์ประกอบฉาก){ super(props); this.state = { } } render(){ return ( <div> Children <br /> {this.props.msg} </div> ) }} ส่งออกค่าเริ่มต้น Children;

3.2 วิธีการส่งสัญญาณ

นำเข้า React จาก 'react'; นำเข้า Children จาก './Children'; class Up ขยาย React.Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); this.state = { } } run = () => { console.log ("วิธีการรันองค์ประกอบหลัก"); } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}ส่งออกเริ่มต้นขึ้น ;นำเข้า React จาก 'react';class Children ขยาย React.Component{ Constructor(props){ super(props); this.state = { } } run = () => { this.props.run(); ){ return ( <div> Children <br /> <button onClick={this.run}>Run</button> </div> ) }}ส่งออกค่าเริ่มต้น Children;

3.3 ส่งผ่านองค์ประกอบหลักไปยังองค์ประกอบย่อย

นำเข้า React จาก 'react'; นำเข้า Children จาก './Children'; class Up ขยาย React.Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); this.state = { } } run = () => { console.log ("วิธีการเรียกใช้องค์ประกอบหลัก"); } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}ส่งออกเริ่มต้นขึ้น;นำเข้า โต้ตอบจาก 'react';class Children ขยาย React.Component{ Constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg) } (){ return ( <div> Children <br /> <button onClick={this.run}>Run</button> </div> ) }}ส่งออกค่าเริ่มต้น Children;

4. ส่วนประกอบย่อยส่งผ่านค่าไปยังส่วนประกอบหลัก

องค์ประกอบลูกส่งค่าไปยังองค์ประกอบหลักผ่านวิธีการทริกเกอร์

นำเข้า React จาก 'react'; นำเข้า Children จาก './Children'; class Up ขยาย React.Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); this.state = { } } getChildrenData = (data) => { console. log(data); } render(){ console.log("render"); return( <div> up <Children upFun={this.getChildrenData}/> </div> ) }}ส่งออกค่าเริ่มต้น ขึ้น; นำเข้าปฏิกิริยาจาก 'react';class Children ขยาย React.Component{ ตัวสร้าง (อุปกรณ์ประกอบฉาก){ super(props); this.state = { } } render(){ return ( <div> Children <br /> <button onClick={() = > {this.props.upFun("ข้อมูลส่วนประกอบย่อย")}}>เรียกใช้</button> </div> ) }}ส่งออกค่าเริ่มต้น Children;

5. รับคุณสมบัติและวิธีการขององค์ประกอบย่อยผ่านการอ้างอิงในองค์ประกอบหลัก

นำเข้า React จาก 'react'; นำเข้า Children จาก './Children'; class Up ขยาย React.Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) { super (อุปกรณ์ประกอบฉาก); this.state = { } } clickButton = () => { console.log (this.refs.children); } render(){ console.log("render"); return( <div> ขึ้น <Children ref="children" msg="test"/> <button onClick={this.clickButton }>คลิก</ปุ่ม> </div> ) }}ส่งออกเริ่มต้นขึ้น;``````jsimport React จาก 'react';class Children ขยาย React.Component{ Constructor(props){ super(props); this. state = { title: "องค์ประกอบย่อย" } } runChildren = () => { } render(){ return ( <div> Children <br /> </div> ) }}ส่งออกค่าเริ่มต้น Children;````