【NEXT.JS 系列】從 JAVASCRIPT 到 REACT 6

使用 Props 顯示數據

到目前為止，如果您重複使用 <Header> 組件，它只會顯示一模一樣的內容。

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

function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

但是，如果您想傳遞不同的文字，或者因為您從外部來源獲取數據而無法提前知道訊息，該怎麼辦？

常規 HTML 元素具有可用於傳遞改變這些元素行為的訊息的屬性。 例如，更改 <img> 元素的 src 屬性會更改顯示的圖像。 更改 <a> 標記的 href 屬性會更改連結的目標。

同樣地，您可以將訊息片段作為屬性傳遞給 React 元件。 這些被稱為 props。

與 JavaScript 函數類似，您可以設計接受自定義參數（或 props）的元件，這些參數（或 props）會改變元件的行為或渲染到屏幕時可見的內容。 然後，您可以將這些 props 從父元件傳遞給子元件。

注意：在 React 中，數據沿著元件樹向下流動。 這被稱為單向數據流。 State，將在下一節中討論，可以作為 props 從父元件傳遞到子元件。

使用 props

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

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

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

// ReactDOM.render(<HomePage />, app)

子元件 Header 可以接受這些 props 作為其第一個函數參數：

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

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

// ReactDOM.render(<HomePage />, app)

如果你 console.log() props，你可以看到它是一個帶有 title 屬性的物件。

function Header(props) {
    console.log(props) // { title: "React 💙" }
//   return <h1>React 💙</h1>
// }

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

// ReactDOM.render(<HomePage />, app)

由於 props 是一個物件，您可以使用物件解構在函數參數中顯式命名 props 的值：

function Header({ title }) {
    console.log(title) // "React 💙"
//  return <h1>React 💙</h1>
// }

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

// ReactDOM.render(<HomePage />, app)

然後，您可以用您的標題變量替換 <h1> 標記的內容。

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

如果你在瀏覽器中打開你的專案，你會看到它正在顯示單詞 “title”。 這是因為 React 認為您打算將純文本字串呈現給 DOM。

你需要一種方法來向 React 表明這是一個 JavaScript 變量。

在 JSX 中使用變量

要使用您定義的變量，您可以使用花括號 {}，這是一種特殊的 JSX 語法，允許您直接在 JSX 標記中編寫常規 JavaScript。

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

您可以將花括號視為在”JSX 領域”中進入”JavaScript 領域”的一種方式。 您可以在花括號內添加任何 JavaScript 表達式（計算結果為單個值的東西）。 例如：

正如我們剛剛討論的，帶有點符號（dot notation）的物件屬性：

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

模板文字：

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

函數的回傳值：

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}

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

三元運算符：

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

您現在可以將任何字串傳遞給您的 title 屬性，並且由於您已經使用三元運算符考慮了組件中的預測情況，您甚至可以不傳遞標題屬性：

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

function Page() {
  return (
    <div>
      <Header />
    </div>
  );
}

您的元件現在接受一個通用的標題 prop，您可以在應用程式的不同部分重複利用它。 您需要做的僅是更改標題：

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

遍歷清單

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

注意：React 在數據獲取方面沒有偏好的，這意味著您可以選擇最適合您需求的解決方案。 稍後，我們將討論 Next.js 中的數據獲取選項。 但是現在，您可以使用一個簡單的陣列來表示數據。

將一組名稱添加到您的 HomePage 元件中：

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
    </div>
  );
}

然後，您可以使用 array.map() 方法遍歷陣列並使用箭頭函數將名稱映射到清單項目：

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 prop 的警告。 這是因為 React 需要一些東西來唯一地標識陣列中的項目，以便它知道要在 DOM 中更新哪些元素。

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

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>
  );
}

在下一節中，您將了解更多關於 state 以及如何在 React 中偵聽用戶事件。