数据结构
网络
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+ 次浏览
广告