Props與組件之間的數據傳遞

React 中的 Props 與組件之間的數據傳遞

在 React 中，props（屬性） 是一個重要的概念，負責在組件之間進行數據傳遞。props 是組件的輸入，通過父組件傳遞到子組件，並且子組件無法修改這些 props，它們是唯讀的。

1. 什麼是 Props？

props 是 React 組件之間傳遞數據的方式。父組件可以通過 props 將數據傳遞給子組件。props 是子組件用來顯示 UI 或進行邏輯處理的重要數據。

範例：

function Welcome(props) {
  return <h1>歡迎, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="小明" />
      <Welcome name="小美" />
    </div>
  );
}

在這個例子中：

• App 是父組件，Welcome 是子組件。
• App 組件將屬性 name="小明" 和 name="小美" 傳遞給 Welcome 組件。
• Welcome 組件通過 props.name 接收到這些屬性並在 UI 中渲染。

2. Props 是唯讀的

React 中的 props 是不可變的，也就是說，子組件無法修改 props。這樣可以保證數據流是單向的，從父組件流向子組件，保持組件之間的數據傳遞穩定和可預測。

範例：

function Welcome(props) {
  // 不能改變 props 的值
  props.name = "不能這麼做"; // 這會引發錯誤
  return <h1>歡迎, {props.name}!</h1>;
}

React 強調組件應該是純函數，即根據輸入（props）來渲染輸出，並且不會修改輸入。

3. 組件之間的數據傳遞

父組件可以將數據、函數等作為 props 傳遞給子組件。子組件通過訪問 props 來使用父組件傳遞的數據。

範例：父組件向子組件傳遞數據

function ChildComponent(props) {
  return <p>這是父組件傳來的數據: {props.data}</p>;
}

function ParentComponent() {
  const parentData = "Hello from Parent!";
  
  return (
    <div>
      <ChildComponent data={parentData} />
    </div>
  );
}

在這裡，ParentComponent 是父組件，將 parentData 傳遞給 ChildComponent 作為 props，然後子組件通過 props.data 來顯示數據。

4. 傳遞函數作為 Props

除了數據，父組件還可以將函數傳遞給子組件，這樣子組件就可以調用父組件的方法，進行交互操作。

範例：父組件傳遞函數給子組件

function ChildComponent(props) {
  return (
    <button onClick={props.handleClick}>
      點擊我
    </button>
  );
}

function ParentComponent() {
  const handleClick = () => {
    alert('子組件觸發的事件');
  };

  return (
    <div>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
}

在這個例子中，ParentComponent 傳遞了一個名為 handleClick 的函數作為 props 給 ChildComponent。當子組件中的按鈕被點擊時，會調用這個父組件的函數，從而實現交互。

5. 傳遞複合結構（props.children）

React 提供了 props.children 來讓組件可以嵌套其他組件或 JSX 結構。這個特性可以用來創建可複用的 UI 元件，如彈出層、面板等。

範例：使用 props.children 傳遞子內容

function Container(props) {
  return (
    <div className="container">
      {props.children}
    </div>
  );
}

function App() {
  return (
    <Container>
      <h1>這是標題</h1>
      <p>這是段落內容</p>
    </Container>
  );
}

在這裡，Container 組件使用 props.children 來顯示它的子內容。在 App 組件中，Container 中的 h1 和 p 標籤都會作為 props.children 傳遞給 Container 組件。

6. Prop Types 檢查

React 允許你使用 PropTypes 來檢查 props 的類型，以確保組件接收到的 props 是正確的數據類型，這有助於開發和調試。

範例：設置 PropTypes

import PropTypes from 'prop-types';

function Welcome(props) {
  return <h1>歡迎, {props.name}!</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired
};

function App() {
  return <Welcome name="小明" />;
}

在這裡，Welcome 組件要求 name 是一個必須的 string 類型。如果傳遞的 props 不符合要求，React 會在開發環境中給出警告。

7. 傳遞默認 Props

你可以使用 defaultProps 為組件設置默認的 props 值。這樣即使父組件沒有傳遞某些 props，子組件也會有一個默認值可用。

範例：設置默認 Props

function Welcome(props) {
  return <h1>歡迎, {props.name}!</h1>;
}

Welcome.defaultProps = {
  name: '訪客'
};

function App() {
  return <Welcome />;
}

在這個例子中，Welcome 組件會顯示 “歡迎, 訪客！”，因為父組件沒有傳遞 name 值，React 使用了默認的 name。

---

總結

在 React 中，props 是父組件與子組件之間傳遞數據的主要方式。通過 props，組件可以從父組件接收數據或函數，進行交互操作。props 是不可變的，因此子組件不能直接修改 props，這保證了數據流的單向性和組件的可預測性。此外，React 還支持使用 props.children 傳遞嵌套內容，並且提供了 PropTypes 和 defaultProps 來輔助類型檢查和默認值設置。