ReactJS – Các thành phần

0
50

Ví dụ không trạng thái

Thành phần đầu tiên của chúng ta trong ví dụ sau là Ứng dụng . Thành phần này là chủ sở hữu của Header và Content . Chúng tôi đang tạo Tiêu đề và Nội dung riêng biệt và chỉ thêm nó vào bên trong cây JSX trong thành phần Ứng dụng của chúng tôi . Chỉ thành phần Ứng dụng cần được xuất.

App.jsx

import React from 'react'; 
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;

Để có thể hiển thị điều này trên trang, chúng ta cần nhập nó vào tệp main.js và gọi reactDOM.render () . Chúng tôi đã làm điều này trong khi thiết lập môi trường.

main.js

import React from 'react'; 
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

Đoạn mã trên sẽ tạo ra kết quả sau.

Ví dụ về trạng thái

Trong ví dụ này, chúng tôi sẽ đặt trạng thái cho thành phần chủ sở hữu ( Ứng dụng ). Thành phần Header chỉ được thêm vào giống như trong ví dụ trước vì nó không cần bất kỳ trạng thái nào. Thay vì thẻ nội dung, chúng tôi đang tạo các phần tử bảng và tbody , nơi chúng tôi sẽ tự động chèn TableRow cho mọi đối tượng từ mảng dữ liệu .

Có thể thấy rằng chúng ta đang sử dụng cú pháp mũi tên (=>) của EcmaScript 2015 trông gọn gàng hơn nhiều so với cú pháp JavaScript cũ. Điều này sẽ giúp chúng tôi tạo các phần tử của mình với ít dòng mã hơn. Nó đặc biệt hữu ích khi chúng ta cần tạo một danh sách với rất nhiều mục.

App.jsx

import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
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'));

Lưu ý – Lưu ý rằng chúng ta đang sử dụng hàm key = {i} bên trong map () . Điều này sẽ giúp React chỉ cập nhật các phần tử cần thiết thay vì hiển thị lại toàn bộ danh sách khi có điều gì đó thay đổi. Đó là một sự tăng hiệu suất rất lớn cho số lượng lớn hơn các phần tử được tạo động.

Tham khảo khóa học: Lập trình Front end với ReactJS

LEAVE A REPLY

Please enter your comment!
Please enter your name here