React.js nhúng map() vào JSX
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 […]
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.
