ReactJS – Tổng quan về Props
Sự khác biệt chính giữa state và props là props không biến đổi. Đây là lý do tại sao các component cha phải xác định trạng thái có thể cập nhật và thay đổi, trong khi các component con chỉ nên truyền dữ liệu từ trạng thái bằng cách sử dụng props
Sử dụng Props
Khi chúng ta cần dữ liệu bất biến trong component của mình, chúng ta có thể thêm props vào hàm reactDOM.render () trong main.js và sử dụng nó bên trong component của chúng ta.
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.
Default Props
Bạn cũng có thể đặt giá trị thuộc tính mặc định trực tiếp trên phương thức khởi tạo component thay vì thêm nó vào phần tử 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'));
Đầu ra giống như trước đây.
State and Props
Ví dụ sau đây cho thấy cách kết hợp state và props trong app của bạn. Chúng tôi đang thiết lập trạng thái trong component cha của chúng tôi và chuyển nó xuống component tree bằng cách sử dụng props. Bên trong hàm render , chúng tôi đang 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ẽ lại giống như trong hai ví dụ trước, điều khác biệt duy nhất là nguồn dữ liệu của chúng ta, bây giờ 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 state, và tất cả các component con sẽ được cập nhật. Thông tin thêm về điều này trong chương Events.
Bài viết nổi bật
Bài viết nổi bật