Cách lặp lại bên trong React JSX

Cách lặp trong một thành phần React JSX


Nếu bạn có một tập hợp các phần tử mà bạn cần lặp lại để tạo một phần JSX, bạn có thể tạo một vòng lặp và sau đó thêm JSX vào một mảng:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

Bây giờ khi kết xuất JSX, bạn có thể nhúngitemsmảng bằng cách gói nó trong dấu ngoặc nhọn:

render() {
  const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> ) }

Bạn có thể làm điều tương tự trực tiếp trong JSX, bằng cách sử dụngmapthay vì vòng lặp for-of:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: