javascript - 以适当的方式解构

Question

在我的 React 应用程序中，我有以下组件。我已经解构了它，但我仍然必须使用 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

我猜这取决于你想要的解构程度？我可能不会费心去进一步解构 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 :

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

这只是我的想法。