Bài 5: Props - Tổng quan

Sự khác biệt chính giữa state và props là bất biến(immutatble). Đây là lý do tại sao thành phần 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ừ state bằng cách sử dụng props.

1 . Using Props

Khi chúng ta cần dữ liệu bất biến ( immutable) trong component(thành phần), ta chỉ có thể thêm props vào hàm reactDOM.render () trong main.js và sử dụng nó bên trong component.

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;

Run npm start và kết quả hiển thị như sau :

Default Props :

Ta có thể đặt giá trị mặc định của props trực tiếp trên component ở phương thức khở tạo (constructor) thay vì thêm nó vào 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'));

Kết quả hiện ra như sau :

2 . State và Props:

Ví dụ sau đây cho thấy cách kết hợp state và props trong ứng dụng của bạn. Mình thiết lập state trong component mẹ và chuyển nó xuống cây component bằng cách sử dụng props. Bên trong hàm kết xuất, mình thiết lập headerProp và contentProp được sử dụng trong các component 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ẽ giống như trong hai ví dụ trước, điều khác biệt là nguồn dữ liệu bắt đầu từ biến state. Khi ta muốn cập nhật , ta chỉ cần cập nhật biến state, 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 bài Reactjs - Sự kiện.

Bài tiếp theo: Bài 6: Props - Validation