ReactJS - Tổng quan về đạo cụ

Sự khác biệt chính giữa trạng thái và đạo cụ là propslà bất biến. Đây là lý do tại sao thành phần vùng chứa phải xác định trạng thái có thể được cập nhật và thay đổi, trong khi các thành phần con chỉ nên truyền dữ liệu từ trạng thái bằng cách sử dụng đạo cụ.

Sử dụng Đạo cụ

Khi chúng ta cần dữ liệu bất biến trong thành phần của mình, chúng ta có thể thêm đạo cụ vào reactDOM.render() chức năng trong main.js và sử dụng nó bên trong thành phần của chúng tôi.

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;

Điều này sẽ tạo ra kết quả sau.

Đạo cụ mặc định

Bạn cũng có thể đặt các giá trị thuộc tính mặc định trực tiếp trên hàm tạo thành phần thay vì thêm nó vào reactDom.render() thành phần.

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'));

Đầu ra giống như trước đây.

Trạng thái và Đạo cụ

Ví dụ sau đây cho thấy cách kết hợp statevà đạo cụ trong ứng dụng của bạn. Chúng tôi đang thiết lập trạng thái trong thành phần mẹ của mình và chuyển nó xuống cây thành phần bằng cách sử dụngprops. Bên trongrender chức năng, chúng tôi đang thiết lập headerProp và contentProp được sử dụng trong các thành phần con.

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'));

Kết quả sẽ lại giống như trong hai ví dụ trước, điều duy nhất khác biệt là nguồn dữ liệu của chúng tôi, nguồn dữ liệu hiện tại ban đầu đến từ state. Khi chúng ta muốn cập nhật nó, chúng ta chỉ cần cập nhật trạng thái, và tất cả các thành phần con sẽ được cập nhật. Thông tin thêm về điều này trong chương Sự kiện.