Clever use of dynamic deconstruction properties in react

1. ESLintAnyone who has used the plug-in knows that Vscodeif you do not need to deconstruct the value, it will recommend you to use deconstruction assignment.
2. In the project, 对象解构the most common method I use most often is.
3. This writing method is very basic, and all values ​​can be written like this. In this way, the easiest way to write is in compliance with the react官方建议的写法和符合ESLintspecification.

从this.state、this.props中取值
 const listType = this.state.listType; // 一般写法

 const {
    
     listType,fileList,downloadTitle } = this.state;

 const {
    
     dispatch, registrationId } = this.props;

4、

Deconstruct dynamic properties

Now 对象解构中使用变量, it can facilitate the value assignment operation.
Write variable value in []

 const {
    
     [listType]: {
    
     infoList } } = this.props;

The application scenario is also very simple to think of,

  • You can control variables according to the situation, control infoListwhere you get values ​​from, and realize more complex scenarios.
    The dispatchsame can be used in
    const {
    
     keyword, typeId, state, listType } = this.state;
    dispatch({
    
    
      type: `${
      
      listType}/getApplicationPageList`,
      payload: {
    
    
      .......

6. Simple and simple to share. Please correct me if there is any improper place.
Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_45416217/article/details/108417805