React.js nhúng map() vào JSX
- Thay vì khai báo một
map()tách riêng phần render, ta hoàn toàn có thể sử dụng bên trong cấu trúc JSX của phần render. - Ta thực hiện như sau:
| map() bên ngoài render | map() bên trong JSX của render |
|---|---|
function ListItem(props) {
return <li>{props.value}</li>;
};
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number * 2} />
);
return (
<ul>
{listItems}
</ul>
);
};
|
function ListItem(props) {
return <li>{props.value}</li>;
};
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number * 2} />
)}
</ul>
);
};
|
Hiển thị trình duyệt
- 2
- 4
- 6
- 8
- 10
- Ta thấy JSX cho phép chúng ta nhúng một biểu thức bên trong cặp dấu
{}, việc này giúp code rõ ràng hơn.