Правильное разрушение

Question

В моем приложении «Реакция» у меня есть следующий компонент.Я его деструктурировал, но все равно мне нужно использовать: profile.company, profile.user.name и т. Д.

Я могу так деструктировать.

const { profile } = props;
const { location } = profile
const { name} = profile.user;

Но это делает мой код уродливым,Как наилучшим образом деструктурировать следующий компонент?

import React from 'react';
import PropTypes from 'prop-types';

import { Header, RouterLink } from '../UI';

const UserInfo = props => {
   const { profile } = props;

   return (
      <div>
         <Header  
            Tag='h3'
            className='text-muted' 
            text={profile.user.name} 
         />

         <Header 
            Tag='h5'
            className='text-muted' 
            text={isEmpty(profile.company) ? 'Currently not employed': `${profile.status} ${profile.company}`}
         />

         <Header 
            Tag='h6'
            className='text-muted' 
            text={isEmpty(profile.location) ? 'Location unknown' : profile.location}
         />

         <RouterLink
            className="btn btn-info"
            route={`/profile/${profile.handle}`}
            text='View Profile'
         />
      </div>
   );
} 

UserInfo.propTypes = { 
   type: PropTypes.string.isRequired,
   className: PropTypes.string.isRequired,
   text: PropTypes.string,
   disabled: PropTypes.bool,

   onClick: PropTypes.func
}

export default UserInfo;

Answer 1

Я думаю, что вы можете использовать деструктурирование следующим образом:

Сначала мы получаем профиль из реквизита, позже, возможно, вы сможете получить больше свойств из его реквизита (например: account, userи т. д., ...), скажем, уровень 0:

const { profile } = props;

Затем мы получим ближайший вложенный, скажем, уровень 1:

const  { company, location, handle, profile } = props;

Наконец, для второго ближайшего вложенного, скажем, уровень2:

Решение 1

const { user: { name } } = profile;

или:

Решение 2

const { user } = profile;
const { name } = user;

Я предпочитаю Solution 2 , идея состоит в том, чтобы использовать деструктурирование с тем же уровнем от root для простого обслуживания.

Answer 2

Зависит от того, насколько вы хотите деструктурировать?Я, вероятно, не стал бы беспокоиться о деструктуризации user дальше (хотя вы могли бы, если хотите) и просто оставил бы это как:

import React from 'react';
import PropTypes from 'prop-types';

import { Header, RouterLink } from '../UI';

const UserInfo = props => {
   const { user: {name}, company, status, location, handle } = props.profile;

   return (
      <div>
         <Header  
            Tag='h3'
            className='text-muted' 
            text={name} 
         />

         <Header 
            Tag='h5'
            className='text-muted' 
            text={isEmpty(company) ? 'Currently not employed': `${status} ${company}`}
         />

         <Header 
            Tag='h6'
            className='text-muted' 
            text={isEmpty(location) ? 'Location unknown' : location}
         />

         <RouterLink
            className="btn btn-info"
            route={`/profile/${handle}`}
            text='View Profile'
         />
      </div>
   );
} 

UserInfo.propTypes = { 
   type: PropTypes.string.isRequired,
   className: PropTypes.string.isRequired,
   text: PropTypes.string,
   disabled: PropTypes.bool,

   onClick: PropTypes.func
}

export default UserInfo;

Если вы беспокоитесь о том, что profile.user.name не определено, вы также можете изменить заголовокдалее:

<Header  
    Tag='h3'
    className='text-muted' 
    text={name ? name : 'fallback'} 
/>

Это все равно моя мысль.

Answer 3

Вы можете сделать:

const UserInfo = ({
  profile: {
    company,
    handle,
    location,
    status,
    user: { name }
  }
}) => {
  return (
    <div>
      <Header Tag="h3" className="text-muted" text={name} />

      <Header
        Tag="h5"
        className="text-muted"
        text={
          isEmpty(company) ? "Currently not employed" : `${status} ${company}`
        }
      />

      <Header
        Tag="h6"
        className="text-muted"
        text={isEmpty(location) ? "Location unknown" : location}
      />

      <RouterLink
        className="btn btn-info"
        route={`/profile/${handle}`}
        text="View Profile"
      />
    </div>
  );
};

Ссылка на аргументы деструктурирования в сигнатуре метода.

Answer 4

Как насчет const { profile: { user: { name }, location, company, status } = props