Использовать деструктурирующее назначение внутри государства

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

вы можете сделать это так. Для получения дополнительной информации о предпочтительной деструктуризации

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);

, чтобы получить label от реквизита, может сделать это [{ props: { label } }]

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

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

Со сложными данными

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)