React PROPS

基本認識

• Props 是組件的輸入參數，用於從父組件向子組件傳遞數據。
• Props 是唯讀的，子組件無法直接修改它們。

首先創建以下檔案:

Welcome.jsx 程式碼:

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

export default Welcome;

• 這個範例定義了一個接收 props 的簡單組件。

import Welcome from "./Welcome.jsx"

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

export default App

效果:

當我們將鍵值對傳入子組件時，它們都儲存在Props物件中，要獲取與鍵關聯的值，輸入Props.鍵的名稱就可以了

好，現在我們繼續擴展Welcome.jsx程式碼:

function Welcome(props) {
  return(
	  <div> 
		  <h1>歡迎, {props.name}!</h1>
		  <p>您的年紀: {props.age}!</p>
		  <p>學生: {props.isStudent ? "Yes" : "No"}</p>
		</div>
	);
}

export default Welcome;

接下來，我們在再次編輯App.jsx程式碼:

import Welcome from "./Welcome.jsx"

function App() {
  const name = "John";
  const age = 20;
  let isStudent = false;
  return (
    <>
      <Welcome name="Michael" age={age} isStudent={isStudent}/>
    </>
  );
}

export default App

效果:

Props 的類型檢查 (PropTypes)

• 為了確保傳遞的 Props 符合預期的數據類型，可以使用 prop-types 庫進行類型檢查。

為此我們需要繼續編輯Welcome.jsx程式碼:

import PropTypes from 'prop-types';

function Welcome(props) {
    return(
        <div> 
            <h1>歡迎, {props.name}!</h1>
            <p>您的年紀: {props.age}!</p>
            <p>學生: {props.isStudent ? "Yes" : "No"}</p>
        </div>
    );
}
Welcome.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    isStudent: PropTypes.bool,
}
export default Welcome;

回到App.jsx，此時如果我們執行以下變動

import Welcome from "./Welcome.jsx"

function App() {
  const name = "John";
  const age = 20;
  let isStudent = 100; // 變更此處
  return (
    <>
      <Welcome name="Michael" age={age} isStudent={isStudent}/>
    </>
  );
}

export default App

此時到瀏覽器那邊按下F12後觀察Console，你會收到以下警告:

所以，這不但不會停止程序運行，只是發出警告。類型檢查是一個好習慣，這對Debug非常有用。

最後，我們探討最後一個主題:

Props 的默認值 (Default Props)

如果父組件沒有傳遞某個 Prop，可以為子組件設置默認值。

為此我們需要繼續編輯Welcome.jsx程式碼:

import PropTypes from 'prop-types';

function Welcome(props) {
    return(
        <div> 
            <h1>歡迎, {props.name}!</h1>
            <p>您的年紀: {props.age}!</p>
            <p>學生: {props.isStudent ? "Yes" : "No"}</p>
        </div>
    );
}
Welcome.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    isStudent: PropTypes.bool,
}
Welcome.defaultProps = {
    name: "Guest",
    age: 0,
    isStudent: false,
}
export default Welcome;

回到App.jsx，此時如果添加另外的相同組件，一個只傳遞名字、一個甚麼都不傳，請觀察輸出。

import Welcome from "./Welcome.jsx"

function App() {
  const name = "John";
  const age = 20;
  let isStudent = false;
  return (
    <>
      <Welcome name="Michael" age={age} isStudent={isStudent}/>
      <Welcome />
      <Welcome name={name}/>
    </>
  );
}

export default App

效果:

不過，我們打開瀏覽器那邊按下F12後觀察Console，你會收到以下警告:

• 這個訊息的意思是：未來的 React 主要版本中，將不再支援在「函式型元件」(function components) 中使用 defaultProps。官方建議改用 JavaScript 的預設參數(default parameters) 來取代。

import PropTypes from 'prop-types';

function Welcome({
  name = "Guest",
  age = 0,
  isStudent = false
}) {
  return (
    <div>
      <h1>歡迎, {name}!</h1>
      <p>您的年紀: {age}!</p>
      <p>學生: {isStudent ? "Yes" : "No"}</p>
    </div>
  );
}

Welcome.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  isStudent: PropTypes.bool,
};

export default Welcome;

• 此時，輸出效果是一樣的。