反应组件。渲染特定元素

Question

目前我有一个组件 User，它呈现 2 个元素 -> username 和 avatar. 我完美地获取了用户名和头像，但我只想查看 用户名 only

有没有办法只获取 username 元素？没有头像。

//User component
const User = ({ username, profilePic }) => {
  return (
    <React.Fragment>
      <Avatar name='user' src={profilePic.profile.image} alt="user_image" ml="5"/>
      <Heading size={'sm'} ml="5">{username.username}</Heading>
    </React.Fragment>
  );
};


// Content Page
{group.members.map(member => {
 return <React.Fragment key={member.id}>
    <User username={member.user} profilePic={member.user}/>
      </React.Fragment>
 })}

Answer 1

您可以添加一个额外的道具 renderAvatar，并且仅在布尔值为 true 且具有条件渲染的情况下才显示头像。

const User = ({ username, profilePic, renderAvatar }) => {
  return (
    <React.Fragment>
      {renderAvatar && <Avatar name='user' src={profilePic.profile.image} alt="user_image" ml="5"/>}
      <Heading size={'sm'} ml="5">{username.username}</Heading>
    </React.Fragment>
  );
};

你可以这样使用它。

<User username={member.user} profilePic={member.user} renderAvatar={false} />
<User username={member.user} profilePic={member.user} renderAvatar={true} />

或者只创建一个只呈现 Heading.

的组件

const UserWithoutAvatar = ({ username }) => {
  return <Heading size={'sm'} ml="5">{username.username}</Heading>
};

Answer 2

一种选择是根据是否提供 profilePic 有条件地呈现。例如：

return (
  <React.Fragment>
    { profilePic ?
        <Avatar name='user' src={profilePic.profile.image} alt="user_image" ml="5"/>
      : null
    }
    <Heading size={'sm'} ml="5">{username.username}</Heading>
  </React.Fragment>
);

那么如果你不提供 profilePic 它将是 undefined:

<User username={member.user} />

顺便说一句，代码似乎在命名方面产生了混乱。例如：

{username.username}

一个叫做“用户名”的属性表示它是一个代表用户名的字符串。但是在这种情况下 username 是一个包含一个名为 username 的属性的对象吗？ that 属性是否包含字符串？还是其他对象？

或在这里：

<User username={member.user} profilePic={member.user}/>

什么是member.user？是用户名吗？这是个人资料照片吗？不知何故两者兼而有之？

清晰度很重要。如果您实际传递给组件的是 user 对象，那么将其命名为：

<User user={member.user} />

或者，如果组件需要 username 的字面值和 profilePic 的字面值，则将这些值传递给它：

<User username={member.user.username} profilePic={member.user.profile.image} />

不要混淆你的语义。混乱导致错误。

反应组件。渲染特定元素

React component. Render specific element

javascript

components

jsx

reactjs

react-props