ReactJS - ภาพรวมอุปกรณ์ประกอบฉาก

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

การใช้อุปกรณ์ประกอบฉาก

เมื่อเราต้องการข้อมูลที่ไม่เปลี่ยนรูปในส่วนประกอบของเราเราสามารถเพิ่มอุปกรณ์ประกอบฉากเข้าไปได้ reactDOM.render() ฟังก์ชันใน main.js และใช้ภายในส่วนประกอบของเรา

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้

อุปกรณ์ประกอบฉากเริ่มต้น

คุณยังสามารถตั้งค่าคุณสมบัติเริ่มต้นได้โดยตรงบนตัวสร้างคอมโพเนนต์แทนที่จะเพิ่มลงในไฟล์ reactDom.render() ธาตุ.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

เอาท์พุทเหมือนเดิม

รัฐและอุปกรณ์ประกอบฉาก

ตัวอย่างต่อไปนี้แสดงวิธีการรวม stateและอุปกรณ์ประกอบฉากในแอปของคุณ เรากำลังตั้งค่าสถานะในองค์ประกอบหลักของเราและส่งต่อไปยังโครงสร้างส่วนประกอบโดยใช้props. ข้างในrender เรากำลังตั้งค่า headerProp และ contentProp ใช้ในส่วนประกอบย่อย

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

ผลลัพธ์จะเหมือนกับในสองตัวอย่างก่อนหน้าอีกครั้งสิ่งเดียวที่แตกต่างคือแหล่งที่มาของข้อมูลของเราซึ่งตอนนี้มาจาก state. เมื่อเราต้องการอัปเดตเราเพียงแค่ต้องอัปเดตสถานะและส่วนประกอบย่อยทั้งหมดจะได้รับการอัปเดต เพิ่มเติมเกี่ยวกับเรื่องนี้ในบทเหตุการณ์