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  
    Tag='h3'
    className='text-muted' 
    text={name ? name : 'fallback'} 
/>

那只是我的想法。

Answer 2

我认为您可以像这样使用解构：

首先，我们从道具获得配置文件，稍后也许您可以从其道具中获得更多属性（例如：帐户，用户等），例如0级：

const { profile } = props;

然后我们得到最接近的嵌套，例如1级：

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

最后，对于第二个最接近的嵌套，例如2级：

解决方案1 

const { user: { name } } = profile;

或：

解决方案2

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

我更喜欢解决方案2 ，该想法是使用与根目录相同级别的解构，以便于维护。

Answer 3

const { profile: { user: { name }, location, company, status } = props

Answer 4

您可以这样做：

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

Reference on destructuring arguments in a method signature.

以适当的方式进行销毁

4 个答案: