如何使用React和TypeScript按自定义条件渲染JSX元素？

首先注意原代码的小问题：你给入参data标注的类型是Array<DataType>（数组），但代码里直接取data.version、data.type属性，数组类型不可能存在这两个属性，我先修正为data: DataType对象类型，如果你实际是取数组的某一项，自行调整取值逻辑即可。

我们可以先把重复用到的判断条件抽成公共变量，既避免冗余代码，也方便后续维护，修改后的完整代码如下：

// 你可以根据自己的实际业务调整DataType的结构
type DataType = {
  version: any[];
  type?: {
    name?: string;
    number?: string | number;
  };
};

const ParentComponent = ({ data }: { data: DataType }) => {
  const version = data.version;
  const type = data.type;

  // 抽离公共判断条件
  const hasValidVersion = Array.isArray(version) && version.length > 0;
  // 注：你注释里写的是判断type的name或version，实际代码用的是number，这里按代码逻辑调整，需要改判断字段可自行替换
  const hasValidType = type && (type.name || type.number);

  const renderContent = () => {
    return (
      <Flex flexDirection="column">
        {/* 版本相关内容仅在version非空时展示 */}
        {hasValidVersion && (
          <>
            <div>version</div>
            <div>{version}</div>
          </>
        )}
        {/* 类型相关内容仅在type有name或number时展示 */}
        {hasValidType && (
          <>
            <div>type</div>
            <div>{type.name} {type.number}</div>
          </>
        )}
      </Flex>
    );
  };

  return (
    <>
      <Flex>
        <div>
          <input type="checkbox" />
        </div>
      </Flex>
      {/* 原代码没有调用renderContent，需要渲染内容的话在这里加 {renderContent()} */}
      {/* Icon仅在满足两个条件任意一个时展示 */}
      {(hasValidVersion || hasValidType) && <Icon name="help" />}
    </>
  );
}

逻辑说明 #

• 用React短路渲染语法{条件 && 要渲染的内容}实现按需展示，满足条件才会渲染后面的DOM元素
• 用<>（React Fragment）包裹同组的多个DOM，不会额外生成多余的节点污染结构
• 所有判断先做了值存在的校验，避免空值抛出运行时错误

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