資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究ReactJS – getDerivedStateFromProps() 方法
在本文中，我們將介紹如何在元件呈現之前執行函式。
此方法在元件渲染或更新前呼叫。此方法主要用於在元件渲染之前更新狀態，這取決於元件接收的屬性。此方法在元件每次重新渲染時呼叫。
語法
static getDerivedStateFromProps(props, state)
引數
props − 傳遞給元件的 props
state − 上次元件狀態
示例
在此示例中，我們將構建一個 React 應用程式，該應用程式將獲取使用者列表，單擊“獲取使用者”按鈕後，Show 元件將放置在 DOM 中，在此元件呈現之前，將呼叫 getDerivedStateFromProps 方法，該方法將根據傳遞給它的屬性更新狀態。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
show: false,
};
}
render() {
return (
<div>
<h1>User List</h1>
<h3>Username: Rahul</h3>
<button onClick={() => this.setState({ show: true })}>
Fetch Users
</button>
{this.state.show ? <Show email="qwerty@gmail.com" /> : null}
</div>
);
}
}
class Show extends React.Component {
constructor() {
super();
this.state = {
email: '',
};
}
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps method is called');
return { email: props.email };
}
render() {
return (
<div>
<h3>Email: {this.state.email}</h3>
</div>
);
}
}
export default App;輸出
這會產生以下結果。
更新時間： 2021 年 3 月 18 日
4K+ 次瀏覽
廣告