React中如何条件控制用户组件的Link显示与隐藏？

问题描述 #

我有一个UserAvatar组件，其中包含跳转到用户个人资料页的Link。由于该组件在应用中多处用于展示用户信息，部分场景下我只想展示用户信息，不需要跳转链接。

问题在于JSX表达式中不允许使用不完整的标签，拆分Link标签的写法无法生效——虽然这类场景确实合理，但会触发语法检查报错。我该如何简洁实现需求？

我原本期望的写法（会报错）：

interface UserAvatar {
  id: number;
  screenName: string;
  displayUserLink: boolean;
}

const UserAvatar = ({ id, screenName, displayUserLink }: UserAvatar) => {
  return (
    {displayUserLink && (<Link to={'/users/' + id} >)}
      <div>{screenName} AND A WHOLE BUNCH OF OTHER STUFF...</div>
    {displayUserLink && (</Link>)}
  );
};

export default UserAvatar;

这段代码因Link标签未闭合直接报错。另外说明：组件除了用户名还会渲染大量其他内容，并非简单字符串，此处仅省略细节以展示核心问题。

解决方案 #

将组件要渲染的核心内容提取为变量，再通过条件判断控制是否用Link包裹，这是个非常简洁的方案。我最终调整后的代码如下：

const UserAvatar = ({id, screenName, displayUserLink}: UserAvatar) => {

const content = (
  <div css={styles.userTag}>
    <div>{screenName} AND A WHOLE BUNCH OF OTHER STUFF...</div>
  </div>
);

return (
    {displayUserLink && (<Link to={'/users/' + id}>{content}</Link>)}
    {!displayUserLink && (content)}
);
};

需要注意的细节：在Link内部需以{content}形式渲染内容，外部直接使用content即可。

内容的提问来源于stack exchange，提问作者Roger Hill