章節6

使用 Props 顯示資料

到目前為止，如果您重複使用 <Header /> 元件，它會兩次都顯示相同的內容。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

但是，如果您想傳遞不同的文字，或者因為您要從外部來源擷取資料而事先不知道資訊，該怎麼辦？

一般的 HTML 元素具有屬性，您可以使用這些屬性來傳遞更改這些元素行為的資訊片段。例如，更改 <img> 元素的 src 屬性會更改顯示的圖片。更改 <a> 標籤的 href 屬性會更改連結的目的地。

同樣地，您可以將資訊片段作為屬性傳遞給 React 元件。這些稱為 props。以按鈕的可能變化為例

Diagram showing 3 variations of a button component: Primary, Secondary, and Disabled

類似於 JavaScript 函式，您可以設計接受自定義參數（或 props）的元件，這些參數會更改元件的行為或將其渲染到螢幕上時顯示的內容。然後，您可以將這些 props 從父元件傳遞給子元件。

注意：在 React 中，資料在元件樹中向下流動。這稱為*單向資料流*。下一章將討論的狀態可以作為 props 從父元件傳遞給子元件。

使用 props

在您的 HomePage 元件中，您可以將自定義 title prop 傳遞給 Header 元件，就像傳遞 HTML 屬性一樣

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

而 Header（子元件）可以將這些 props 作為其第一個**函式參數**來接受

index.html

function Header(props) {
  return <h1>Develop. Preview. Ship.</h1>;
}

如果你用 console.log() 檢視 props，你會發現它是一個帶有 title 屬性的物件。

index.html

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

由於 props 是一個物件，你可以使用 物件解構 來明確命名函式參數內的 props 值。

index.html

function Header({ title }) {
  console.log(title); // "React"
  return <h1>Develop. Preview. Ship.</h1>;
}

然後你可以用你的 title 變數替換 <h1> 標籤的內容。

index.html

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

如果你在瀏覽器中開啟你的檔案，你會看到它顯示的是「title」這個字。這是因為 React 認為你打算將純文字字串渲染到 DOM。

你需要一種方法來告訴 React 這是一個 JavaScript 變數。

在 JSX 中使用變數

要使用 title prop，請加上大括號 {}。這是一種特殊的 JSX 語法，允許你直接在 JSX 標記內撰寫一般的 JavaScript。

index.html

function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

你可以將大括號視為一種在「JSX 領域」中進入「JavaScript 領域」的方式。你可以在大括號內加入任何JavaScript 運算式（會得出單一值的式子）。例如：

使用點記法的物件屬性

example.js

function Header(props) {
  return <h1>{props.title}</h1>;
}

樣板字面值

example.js

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}

函式的回傳值

example.js

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

或三元運算子

example.js

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

現在你可以傳遞任何字串到你的 title prop，或者，如果你使用三元運算子，你甚至可以完全不傳遞 title prop，因為你已經在你的元件中考慮了預設情況。

example.js

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

你的元件現在接受一個通用的 title prop，你可以在應用程式的不同部分重複使用它。你只需要更改 title 字串即可。

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
      <Header title="A new title" />
    </div>
  );
}

迭代列表

將資料顯示為列表是很常見的需求。你可以使用陣列方法來操作你的資料，並產生樣式相同但包含不同資訊的 UI 元素。

將以下名稱陣列添加到你的 HomePage 元件中。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

然後，你可以使用 array.map() 方法迭代陣列，並使用箭頭函式將名稱映射到列表項目。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

請注意你是如何使用大括號在「JavaScript」和「JSX」領域之間切換的。

如果您執行這段程式碼，React 會發出缺少 key 屬性的警告。這是因為 React 需要一些東西來唯一識別陣列中的項目，以便它知道要更新 DOM 中的哪些元素。

目前您可以使用名稱，因為它們目前是唯一的，但建議使用保證唯一的東西，例如項目 ID。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

額外資源

傳遞屬性到組件

渲染列表

條件渲染

使用 Props 顯示資料

使用 props

在 JSX 中使用變數

迭代列表

您已完成此章節6