循環播放<li> JSX React 中的元素</li>

Question

在 React.js 文檔中，我想知道Array.map()是如何在 JSX React 中使用的。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

在<ul>標簽中，為什么我們直接放變量listItems呢？ 因為我認為它會返回一個數組而不是像這樣的<li>元素：

<ul>
[
<li></li>,
<li></li>,
<li></li>,
]
</ul>

JSX 如何處理數組？ 我必須手動循環listItems嗎？

先感謝您。

Answer 1

你可能想看看這里： https://stackabuse.com/how-to-loop-in-react-jsx/ 。 我希望這就是你要找的

Answer 2

map()方法是最常用的 function 來遍歷 JSX 中的數據數組。 您可以將 map() 方法附加到數組並傳遞每次迭代都會調用的回調 function。 渲染 User 組件時，將唯一值傳遞給 key prop。

Answer 3

JSX 將數組視為多個元素。 你可以這樣編碼：

function NumberList() {
  return (
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  );
}

或者使用數組。 但是當使用數組時，我們需要為數組中的每個元素添加一個唯一的key屬性：

function NumberList() {
  const listItems = [
    <li key="1">1</li>,
    <li key="2">2</li>,
    <li key="3">3</li>,
  ];

  return (
    <ul>{listItems}</ul>
  );
}

如果要使用一個元素，可以將所有元素包裝到Fragment ：

function NumberList() {
  const listItems = (
    <>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </>
  );

  return (
    <ul>{listItems}</ul>
  );
}

使用 map 與使用數組相同：

function NumberList() {
  const numbers = [1, 2, 3];
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

或者直接在 JSX 中使用 map：

function NumberList() {
  const numbers = [1, 2, 3];

  return (
    <ul>
      {
        numbers.map((number) =>
          <li key={number.toString()}>
            {number}
          </li>
      )}
    </ul>
  );
}

關於key屬性，請參考React的文檔：（ https://reactjs.org/docs/lists-and-keys.html#keys ）[https://reactjs.org/docs/lists-and-keys.html#鍵]。