在状态中使用解构赋值

Question

class BottomPanelProgramTabs extends React.Component<Props, State> {
  state = {
    activeTab: this.props.children[0].props.label,
  };

...

ESLint希望我使用解构赋值

this.props.children[0].props.label

你有什么建议吗？

Answer 1

你可以这样做。For more reference about prefer-destructuring

class BottomPanelProgramTabs extends React.Component<Props, State> {
  constructor(){
        let [props] = this.props.children;
         state = {
          activeTab : props.label
         }

   }

Answer 2

 class BottomPanelProgramTabs extends React.Component<Props, State> {

  state = {
    activeTab: 'default label'
  };

  componentDidMount = () => {

    const [{ props: { label } }] = this.props.children;

    this.setState({
      activeTab: label || 'default label',
      ...
    })
  }

  ...

您可以通过使用[]获取第一个元素并使用{}获取道具来混合析构。

例如的

使用[child]可以得到数组中的第一个元素。

​

const children = [{
    props: {
      label: 'Some label'
    }
  },
  {
    props: {
      label: 'Second label'
    }
  },

  ,
  {
    props: {
      label: 'another label'
    }
  }]
  
  const [child] = children;
  
  console.log(child);

​

为了获得props，我们可以通过添加返回props对象的[ {props} ]来继续混合销毁。

​

const children = [{
    props: {
      label: 'Some label'
    }
  },
  {
    props: {
      label: 'Second label'
    }
  },

  ,
  {
    props: {
      label: 'another label'
    }
  }]
  
  const [ {props} ] = children;
  
  console.log(props);

​

要从props获取label，will可以这样做：[{ props: { label } }]

​

const children = [{
    props: {
      label: 'Some label'
    }
  },
  {
    props: {
      label: 'Second label'
    }
  },

  ,
  {
    props: {
      label: 'another label'
    }
  }]
  
  const [{ props: { label } }] = children;
  
  console.log(label);

​

具有复杂data的

​

const children = [{
    props: {
      label: [{
        data: {
          title: 'complex destructor'
        }
      },
      {
        data: {
          title: 'complex destructor 2'
        }
      }]
    }
  },
  {
    props: {
      label: 'Second label'
    }
  },

  ,
  {
    props: {
      label: 'another label'
    }
  }]

 const [{ props: { label: [ { data: { title } } ] } }] = children;

console.log(title)

​