引用元件

在React裡跟一般的php網頁最不一樣的就是元件的概念，可以利用元件切割並重複利用我們的程式。習慣上，我們會把元件放在components的資料夾裡。例如，components/test/ProductList.jsx

export default function ProductList() {

  return (
    <ul>
    <li>iPad / 20000</li> 
    <li>iPhone X / 30000</li>
   </ul>
  );
}

在pages/test/index.jsx中引用這個元件:

**import ProductList from "../../components/test/ProductList";**

export default function Test() {
  return (
    **<ProductList/>**
  )
}

這樣的引用方式，稱為相對引用，不容易理解，也會因為移動了pages/test/index.jsx的位置，引用就無效，所以，我們來修改一下tsconfig.json的內容

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    **"baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }**
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

• Absolute Imports and Module path aliases

引用元件的方式就改用別名 (path aliases)，記得，因為是改變設定檔，VS Code要重啟才會認得這個新設定。

pages/test/index.jsx

import ProductList from **"@/components/test/ProductList"**
export default function Test() {
  return (
    <ProductList/>
  )
}

如果把內容放進陣列裡並利用陣列的map()方法 (詳參:Array方法)將內容顯示在畫面上，修改後的內容: components/test/ProductList.jsx

export default function ProductList() {
  
  let products= [
    {desc:"iPad", price:20000},
    {desc:"iPhone X", price:30000}
   ];

  return (
    <ul>
    {products.map(product => <li>{product.desc} / {product.price}</li>)}
    </ul>
  );
}

執行的時候，如果打開開發人員工具，會看到一個警告:

Warning: Each child in a list should have a unique "key" prop.

在react裡，為了要監控畫面內容的更動，建議加上key，所以，做一點小修改:

export default function ProductList() {
  
  let products= [
    {desc:"iPad", price:20000},
    {desc:"iPhone X", price:30000}
   ];

  return (
    <ul>
    {products.map((product) => <li **key={product.desc}**>{product.desc} / {product.price}</li>)}
    </ul>
  );
}

事件與useState()

Routing

Form