在 React 中為元件設定預設 props

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React 中的預設 props
  2. 在 React 中為功能元件設定預設 props
  3. 在 React 中為類元件設定預設 props
在 React 中為元件設定預設 props

React 是當今使用最廣泛的 UI 庫。該庫是圍繞虛擬 DOM 和元件等概念設計的,以實現高效的程式碼可重用性。

React Web 應用程式由元件組成,這些元件是 UI 的小型構建塊。它們中的每一個都可以具有自定義的外觀和功能。

你需要在許多小元件之間拆分功能,以便為你的應用提供某些功能。出於這個原因,React 提供了多種方式來在它們之間共享資料和函式。

使用 props 是從父元件向子元件共享資料的最直接方式之一。

React 中的預設 props

在 React 中,通過 props 從父元件接收資料並顯示在子元件中是很常見的。子元件接受 props 作為引數,在 JSX 中,它們使用 props 中的資料來顯示資訊。

在 React 中,通常使用子元件根據通過 props 提供給它們的資料來顯示圖表、文字和其他視覺效果。React 建立在程式碼可重用性之上,因此同一個子元件會有很多例項。

在某些情況下,來自父元件的必要資料將被傳遞給子元件,但有時子元件可能不會收到任何資料。在這種情況下,有必要設定預設 props 來顯示一些值,即使子元件沒有收到任何資料。

讓我們看一個例子。

export default function App() {
  return (
    <div
      className="App"
      style={{ width: 500, height: 500, border: "2px solid red" }}
    >
      This is the parent component
      <Child number={5}></Child>
      <Child></Child>
    </div>
  );
}
function Child(props) {
  return (
    <div style={{ width: 200, height: 200, border: "2px solid yellow" }}>
      This is the child component. Value from props: <b>{props.number}</b>
    </div>
  );
}

如果沒有預設的 props,沒有接收到 props 但在 JSX 中顯示 props 值的子元件將不會顯示任何內容。這個例子渲染了兩個子元件,一個帶有 props,一個沒有。

讓我們看一下輸出。

預設 props

什麼都不顯示不是一個好的使用者體驗實踐。你的使用者可能認為你的 React 應用程式出現故障。

如果你的子元件在理想情況下沒有收到任何 props,你應該顯示一條訊息來傳達這一點。

在 React 中為功能元件設定預設 props

功能元件提供了一種簡單的語法來呈現視覺元素。從 React 16.8 版開始,你甚至可以實現狀態功能並在元件的不同生命週期上執行功能。

你可以使用 defaultProps 屬性為功能元件設定預設 props。讓我們來看看。

export default function App() {
  return (
    <div
      className="App"
      style={{ width: 500, height: 500, border: "2px solid red" }}
    >
      This is the parent component
      <Child number={5}></Child>
      <Child></Child>
    </div>
  );
}
function Child(props) {
  return (
    <div style={{ width: 200, height: 200, border: "2px solid yellow" }}>
      This is the child component. Number from props: <b>{props.number}</b>
    </div>
  );
}
Child.defaultProps = {
  number: "number not passed"
};

你可以在 CodeSandbox 上檢視演示。

在這種情況下,沒有收到任何 props 的子元件的第二個例項將顯示字串 "number not pass"。它不會像沒有 defaultProps 時那樣為空。

當我們提供 props 時,子元件將顯示我們傳遞的值。未通過 props 物件傳遞的值的預設 props 替代。

在 React 中為類元件設定預設 props

類元件的語法不同於功能元件。React 開發人員仍然必須使用 defaultProps 屬性來設定預設 props,但實現方式不同。

這是一個在類元件上設定 defaultProps 屬性的簡單示例。

class Child extends React.Component {
    constructor(props) {}
    static defaultProps = {
        number: "number not passed"
    }
    render() {
        return <div>
            <div style={{ width: 200, height: 200, border: "2px solid yellow" }}>
                 This is the child component. Number from props: <b>{this.props.number}</b>
             </div>
        </div>
    }
}

此類元件將具有與上述功能元件相同的輸出。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Props