前言

在上一章：React 簡單教程-1-元件 我們知道了 React 的元件是什麼，長什麼樣，用 js 和 HTML 小小體驗了一下元件。在這一章，我們將使用 typescript（簡稱 ts） 來代替 js，這種語法的檔名字尾是 tsx。

我強烈建議使用 ts 來開發 React，要說 ts 比 js 好在哪裡？這麼說，js 唯一不好的地方就是它只能用 js 來寫。

如果你不會 ts，那麼你可以稍微地學習一下，官網：typescript，能夠看懂一些基本語法就可以了，我們會在編寫程式碼的過程中慢慢學習。

新建 React-ts 專案

現在，忘了我們在上一章建立的專案吧，我們要重新建立一個使用 ts 開發的 React 專案。建立的方式其實和我們上一章的方式相同，在終端輸入命令，但有一點不一樣：

npm create vite@latest my-react-app -- --template react-ts

在最後面指定模板的引數，我們使用的是 react-ts，表示是一個 react 專案，且用 ts 開發。

進入到資料夾，應該會看到如下的目錄結構：

這個檔案結構我們還是很熟悉的，不過我們能夠注意到，在上一章中我們寫程式碼的元件檔名從 App.jsx 變成了 App.tsx，說明使用的是 ts 語言來開發。按照上一章的步驟，執行 npm i 安裝依賴包，然後執行 npm run dev 來啟動開發伺服器，在瀏覽器中開啟地址 http://localhost:3000/。

你可以在 App.tsx

引數傳遞

元件可以接收其他元件傳遞過來的引數。比如說父元件中有一個值，這個值需要傳遞給子元件顯示，那麼子元件要這麼接收這個值呢？

我們先新建一個子元件吧，這個元件用於顯示值，就叫 displayer.tsx 吧。

export function Displayer() {
  return <div></div>;
}

這個元件要可以接收傳進來的引數，只需要在它的入參裡寫上 props 即可。

export function Displayer(props) {
  return <div></div>;
}
 

這個名字是約定的，所以不能寫錯。它的型別是一個物件，所有傳遞進來的引數都是 props 的屬性。比如說，外部傳遞進來了一個引數叫 name，那麼我們使用這個引數的寫法就是：

export function Displayer(props) {
  //  像這樣獲取，因為所有的傳遞給元件的引數都是 props 的屬性
  const name = props.name;
  return <div></div>;
}

然後，我們把這個引數的值，在返回的 html 裡使用，要用花括號括起來，表示使用這個變數，不然會被識別為字面量：

export function Displayer(props) {
  const name = props.name;
  return (
    <div>
      <div>可以這麼使用變數：{name}</div>
      <div>也可以直接使用：{props.name}</div>
      <div>沒有花括號則被當作是字面量：props.name</div>
    </div>
  );
}

然後，如同我們上一章學的，在父元件中使用子元件，這裡我們的父元件是 App。

import { Displayer } from "./displayer";

function App() {
  return (
    <div>
      {/*使用子元件*/}
      <Displayer />
    </div>
  );
}

我們還沒有在父元件裡給子元件傳遞引數，傳遞引數的方式也非常簡單，就跟 html 的屬性一樣，直接寫上子元件的引數名：

import { Displayer } from "./displayer";

function App() {
  return (
    <div>
      {/*使用子元件，傳遞引數*/}
      <Displayer name="My name is App" />
    </div>
  );
}

注意傳遞引數是直接寫引數名，不需要寫 props，在子元件裡使用時才需要寫 props。

我們啟動看看效果，如下：

可以看到父元件的引數成功傳遞到了子元件並顯示。

如果傳遞更多的引數的話也是一樣的寫法，我在下方做示例，同時給我們的 props 引數新增上型別，以方便的知道子元件能夠傳遞什麼引數，這也是使用 ts 的便捷之處。

//  子元件
export function Displayer(props: { name: string, content: string }) {
  const name = props.name;
  const content = props.content;
  return (
    <div>
      <div>{name}</div>
      <div>{content}</div>
    </div>
  );
}

//  父元件
import { Displayer } from "./displayer";

function App() {
  return (
    <div>
      <Displayer name="My name is App" content="My content is Aoh!!!" />
    </div>
  );
}

效果如下：

當然，我們可以隨意得把玩子元件，學習的方式之一就是用各種方式來把玩，我們可以在父元件中多用幾次子元件：

//  父元件
import { Displayer } from "./displayer";

function App() {
  return (
    <div>
      <Displayer name="My name is App1" content="My content is Aoh!!!1" />
      <Displayer name="My name is App2" content="My content is Aoh!!!2" />
      <Displayer name="My name is App3" content="My content is Aoh!!!3" />
      <Displayer name="My name is App4" content="My content is Aoh!!!4" />
    </div>
  );
}

那麼你就能看到如下效果：

警告

如果這麼寫會怎麼樣？？？

//  在元件中引用它自己
//  不要這麼寫
export function Displayer(props: { name: string, content: string }) {
  const name = props.name;
  const content = props.content;
  return (
    <div>
      <div>{name}</div>
      <div>{content}</div>
      {/* 會發生什麼事？？？ */}
      <Displayer name="My name is Sub1" content="My content is Error!!!1" />
    </div>
  );
}

總結

在本文中，我們學會了元件如何傳遞引數。但是我們的子元件還沒有任何樣式，下一篇中我們將給它加上樣式，讓它看起來好看一些。

參考資料

元件 & Props by React