iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

<法式Terrine : React next.js Chakra-UI styled-component 精緻的搭配>系列 第 13

< 關於 React: 開始打地基| 表單內的顯示元素,map() ShowAdd 與Key >

09-13-2021

前言:
當我們需要的資料越多越繁雜時,我們所需要的是一個可以快速把按照我們所需要呈現的方式。而map()就能幫我們乾淨的印出資料。

本章內容
  • map()在component的寫法
  • Keys是什麼?他的存在會帶給我們什麼呢?
  • Keys的使用說明書-
    • JSX中嵌入map()
    • 錯誤使用說明

map()在component的寫法

我們在創建列表的時候,若使用常規式的JavaScript即是使用for迴圈的寫法進行,事實上我們還可以使用另外一種方式進行建立-map()

使用遍歷陣列的方式印出movies的內容列表:

範例:
const movies = ["貓的報恩","齊木楠雄","小當家"]
const listItems = movies.map((movies)=>
<li>{movies}</li>
);
// 將每次回傳的<li>都存在listItem裡面


// 將listItem包在<ul>裡面,最後render到DOM上
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('Myapp')
);
// 印出
// * 貓的報恩
// * 齊木楠雄
// * 小當家

把以上重新構建成一個component的樣子,使組件接收來自父組件的參數{prop},每個列表的元素都要搭配上key,不然會跳出需要包含key的警告!
(key should be provided for list items)

function MovieList(props) {
  const movies = props.movies;
  const listItems = movies.map((item) =>
    <li key={item.toString()}>
      {item+2}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const movies = ["貓的報恩","齊木楠雄","小當家"];
ReactDOM.render(
  <MovieList movies={movies} />,
  document.getElementById('Myapp')
);
// 1. 在父層`<MovieList movies={movies} />`傳遞props`movies={movies}`
// 2. `MovieList(props)`,函式內傳入`props`
// 3. 定義`movies`變數承接傳遞進來的`props.mivies`
// 4. 定義要顯示的內容以變數`listItem`收起來
// 5. 使用變數`movies`來map其中的內容
// 6. 帶入顯示的map()的{item}參數
// 7. 就會顯示成`貓的報恩+2`



Keys是什麼?他的存在會帶給我們什麼呢?

> Keys的存在可以方便React識別到在DOM中有什麼元素發生了變化,所以應該要給每一個元素一個確切的標示

  1. key的存在最好是在這個列表中擁有一個獨一無二的字符串,通常會使用數據data的id作為key
const todoItems = todos.map((todo) =>
// id是來自dat中的
  <li key={todo.id}>
    {todo.text}
  </li>
);
  1. 當沒有明確的id時,可以使用index索引作為key
// 通常把index寫做 i 
const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);
  1. 如果列表是可以重新排序,不建議使用index索引進行排序,這會導致渲染執行時間變慢
  2. key 會給React作為提示,但不會傳遞給組件,也就是說我們在前面頁面開啟檢查的時候是看不到key的存在的。
    以下的例子中就讀不到key但讀的到id
const content = Cats.map((cat) =>
  <Cat
    key={cat.id}
    id={cat.id}
    title={cat.title} />
);
  1. 如果component中需要使用到和key相同的值,將其作為屬性傳遞。

Keys的使用說明書

-JSX中嵌入map()

在JSX的語法中可以在花括號內嵌入任何表達式,所以我們可以這樣使用map()

  • 如果目前的map()嵌套太多層級反而會造成閱讀障礙,可以拆解出來比較好維護~
function MovieList(props) {
  const movies = props.movies;
  
  return (
    <ul>
      {movies.map((movie) =>
        <ListItem key={movie.toString()}
                  value={movie} />
 
      )}
    </ul>
  );
}

// 


function MovieList(props) {
  const movies;
// 聲明在外面是因為在{}內不能有 const \ let \ var 等字
  return (
    <ul>
      {
          movies = props.movies,
          movies.map((movie) =>
        <ListItem key={movie.toString()}
                  value={movie} />
 
      )}
    </ul>
  );
}


-錯誤使用說明

  1. 元素的key只在與他相比較的兄弟節點對比時才有意義
  2. 當使用map()時最好都加上key

// 孫子層
// 不能在這裡設定key
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} />
 
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}
 
// 最高父層
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);

上一篇
< 關於 React: 開始打地基| 依照條件render畫面 >
下一篇
< 關於 React: 開始打地基| 父組件、子組件、兄弟姐妹組件的關係 >
系列文
<法式Terrine : React next.js Chakra-UI styled-component 精緻的搭配>18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言