如何在JSX/ES6中用简写if else语句实现条件渲染？

嘿，你的思路方向是对的——用三元运算符确实是JSX里实现条件渲染的常用简写方式，但你的代码里有几个小问题需要调整，同时我也会给你几个更严谨、易维护的实现方案。

首先先说说你现有代码的问题：

• 多个元素未包裹：当rep存在时，你返回了<b>和<p>两个独立元素，JSX要求每个分支只能返回一个根元素，直接这样写会触发语法错误，必须用React Fragment（<>...</>）或者一个容器标签（比如<div>）把它们包起来。
• 判断逻辑的严谨性：直接用rep ? ...的话，如果rep是空字符串、0这类falsy值，会被误判为“不存在”，如果你的业务里rep只会是有效字符串或者不存在，那没问题，但更严谨的方式是判断字段是否存在，比如用'rep' in 当前对象或者typeof rep !== 'undefined'。
• 可能的笔误：你写的<b>{rep}(rep)</b>里的(rep)是硬编码的字符串，应该是想标注这个是rep的身份吧？比如改成<b>{rep} (rep)</b>会更符合需求。

接下来给你几个正确的实现方式：

方案一：修正后的三元运算符写法 #

这是最贴合你需求的简写方式，解决了上述所有问题：

// 假设当前遍历的对象是item，比如foo1、foo2、foo3中的一个
{ 'rep' in item ? (
  <>
    <b>{item.rep} (rep)</b>
    <p>{item.name}</p>
  </>
) : (
  <b>{item.name}</b>
)}

这里用'rep' in item精准判断字段是否存在，用<>包裹多个元素，同时修正了rep的展示格式。

方案二：提取为独立组件（更易维护） #

如果这个展示逻辑会在多个地方用到，把它封装成一个小组件会让代码更清晰：

const UserInfo = ({ name, rep }) => {
  // 严谨判断rep是否存在
  if (typeof rep !== 'undefined') {
    return (
      <>
        <b>{rep} (rep)</b>
        <p>{name}</p>
      </>
    );
  }
  return <b>{name}</b>;
};

// 使用的时候直接解构传入数据：
<UserInfo {...foo1} />
<UserInfo {...foo2} />
<UserInfo {...foo3} />

这种方式把渲染逻辑和业务代码解耦，后期修改展示样式或逻辑时更方便。

方案三：用逻辑与（&&）简化（适合部分场景） #

如果可以接受没有rep时，name用<p>标签展示（和有rep时的name标签一致），也可以用逻辑与来简化：

<>
  {item.rep && <b>{item.rep} (rep)</b>}
  <p>{item.name}</p>
</>

不过这个方案和你“无rep时用包裹name”的需求不太匹配，所以仅作为扩展思路。