React中如何仅在subModule.completed为'true'时渲染subModuleName？

问题原因 #

你当前的写法逻辑顺序错误，&& 运算符会从左到右执行判断，左侧表达式为真时会直接返回右侧表达式的结果。你现在的代码在条件满足时只会渲染布尔值true，而非你需要的subModuleName内容。

实现方案 #

方案1：仅控制td内的内容是否展示，tr行始终保留

调整&&的判断顺序即可，同时补充了遍历必填的key属性、优化了冗余的空标签包裹：

{predefined.map((personData, index) => {
  return (
    <thead key={index}>
      <tr>
        <th style={styles.th}>{personData.mainModule}</th>
      </tr>
      {personData.sub_module.map((subModule, subIndex) => {
        return (
          <tr key={subIndex}>
            <td style={styles.td}>
              {/* 先判断完成状态为真，再输出子模块名称 */}
              {subModule.completed === "true" && subModule.subModuleName}
            </td>
          </tr>
        );
      })}
    </thead>
  );
})}

方案2：未完成的子模块整行不渲染（性能更优）

先通过filter过滤出符合条件的子模块，再遍历渲染即可，不需要在JSX内做额外判断：

{predefined.map((personData, index) => {
  return (
    <thead key={index}>
      <tr>
        <th style={styles.th}>{personData.mainModule}</th>
      </tr>
      {personData.sub_module
        .filter(subModule => subModule.completed === "true")
        .map((subModule, subIndex) => {
          return (
            <tr key={subIndex}>
              <td style={styles.td}>
                {subModule.subModuleName}
              </td>
            </tr>
          );
        })}
    </thead>
  );
})}

注意事项 #

• 遍历生成的JSX根元素必须添加唯一key属性，避免React抛出运行时警告
• 建议用严格相等运算符===替代==做判断，避免隐式类型转换带来的逻辑异常

内容的提问来源于stack exchange，提问作者vivek kn