把 component 做多點變化，製作出 IG 或是一些個人介紹常見的「多連結工具（Bio Link Tools）」，也就是多個超連結在同一個頁面。因此在這邊會做出標題與超連結，仿效出 Bio tool 的效果。

調整 index.js

在外面呼叫的 index.js 很簡單， 直接宣告我們要顯示的 component，其中比較多的變化都在 BioTool 內。

//day14
const root14 = ReactDOM.createRoot(document.getElementById("root"));
root14.render(<BioTool />);

建立 BioTool.jsx

這是我們主要變化的檔案，裡面包含三種不同的呼叫方式，用來呈現不同的組合方式。

首先是建立兩個 component，把需要的參數一個個放進個別 component 中，分別一對一的把資料放入標題和超連結中。

第二種是 props 有兩個參數，進入了 LinkGroupItem後，把 props 內設定的 name 和 url 帶出來使用。

第三種也是帶入兩個參數，只是在這個 component 中，他呼叫了超連結的 component－LinkItem。經由兩層的物件結構，達到外面傳一次值，後續都可以用到，且物件重複使用的目的。

import LinkItem from "./LinkSample";
import TitleItem from "./TitleSample";
import LinkGroupItem from "./LinkGroupSample";
import LinkGroupItem2 from "./LinkGroupSample2";

function ShowSample() {
  return (
    <div>
      <h1>Developer's favorite websites</h1>
      <div>
        <TitleItem name="Github"></TitleItem>
        <LinkItem url="https://github.com"></LinkItem>
      </div>
      <div>
        <LinkGroupItem
          name="Stack Overflow"
          url="https://stackoverflow.com"
        ></LinkGroupItem>
      </div>
      <div>
        <LinkGroupItem2
          name="React 中文版"
          url="https://zh-hant.reactjs.org"
        ></LinkGroupItem2>
      </div>
    </div>
  );
}

export default ShowSample;

第一種：兩組 component

建立 TitleSample.jsx

在第一組中，簡單做出兩組 component，這兩組中，這邊定義個別的內容與操作，分別是標題 component 和連結的 component

function LinkItem(props) {
  return (
    <div>
      <a href={props.url}>Hyperlink</a>
    </div>
  );
}

export default LinkItem;

建立 LinkSample.jsx

在這份檔案中，時做出超連結的部分，讓這份元件只要關注在超連結的呈現上，其他東西都不需要管。

function LinkItem(props) {
  return (
    <div>
      <a href={props.url}>Hyperlink</a>
    </div>
  );
}

export default LinkItem;

第二種：props 帶入兩個參數

在第二種中，props 一次帶兩個參數到 LinkGroupItem 的 component 中，分別代表標題的 name 和超連結網址的 url。

建立 LinkGroupItem.jsx

把值帶入到 .jsx 中，直接用屬性的方式把資料叫出來，放在先組好 HTML 的格式中。

function LinkGroupItem(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <a href={props.url}>{props.name}</a>
    </div>
  );
}

export default LinkGroupItem;

第三種：component 各司其職

上面只使用一個 component，但他做了兩個部分，而第三種也是相同的帶值方式，但他在第一層的 component 中又呼叫了一個component，而這個 component 是利用與第一種相同的元件。這樣的分離寫法，可以做到一個元件多次使用的目的，而且保持格式的一致性

建立 LinkGroupItem2.jsx

第三種也是帶入兩個參數，只是在這個 component 中，他呼叫了超連結的 component－LinkItem。因此在這邊他不用自己處理超連結物件的格式，由 LinkItem 進行管理，只需要把值傳進去就行了。

import LinkItem from "./LinkSample";

function LinkGroupItem2(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <LinkItem url={props.url}></LinkItem>
    </div>
  );
}

export default LinkGroupItem2;

先在 LinkGroupItem2 這組中顯示標題名稱，並且在標題下呼叫 LinkItem 這個 component。我們在外層不知道這個 LinkItem 會長什麼樣子，因為他由 LinkItem 所控制。經由這樣的分離寫法，可以做到一個元件多次使用的目的，而且保持格式的一致性。

參考資訊

• Components and Props