SonarQube报错：渲染时勿定义组件，MUI/TS下无需传组件props的解法

问题原因 #

你当前给Select的IconComponent传递了一个内联箭头函数，每次SectionTab组件渲染时，这个函数都会返回一个新的组件实例，React会将其识别为全新的组件类型，进而销毁并重建整个子树的DOM节点和状态，这就是SonarQube触发报错的原因。

解决方案（无需每次传入图标） #

方案1：直接传入AngleIcon组件（推荐）

MUI的Select组件的IconComponent属性本身就支持接收React组件，会自动将所需props传递给它。只需要调整AngleIcon的props接收方式，去掉嵌套的props字段，直接接收props即可：

import Select from "@mui/material/Select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleDown } from "@fortawesome/pro-solid-svg-icons/faAngleDown";

// 直接接收组件props，无需嵌套
const AngleIcon = (props: any) => {
  return (
    <FontAwesomeIcon
      {...props}
      sx={{ marginRight: "10px" }}
      icon={faAngleDown}
      size="xs"
    />
  );
};

const SectionTab = () => {
  return (
    <Select
      id="course_type"
      readOnly={true}
      IconComponent={AngleIcon} // 直接传入组件引用
      variant="standard"
      defaultValue="cr"
      disableUnderline
    />
  );
};

export default SectionTab;

方案2：将包装函数移到组件外部

如果需要对props做额外处理，可将包装AngleIcon的函数移到SectionTab组件外部，保证其引用稳定，避免每次渲染生成新的函数：

import Select from "@mui/material/Select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleDown } from "@fortawesome/pro-solid-svg-icons/faAngleDown";

const AngleIcon = ({ props }: { props: any }) => {
  return (
    <FontAwesomeIcon
      {...props}
      sx={{ marginRight: "10px" }}
      icon={faAngleDown}
      size="xs"
    />
  );
};

// 包装函数移到组件外部，确保引用不变
const IconWrapper = (props: any) => <AngleIcon props={props} />;

const SectionTab = () => {
  return (
    <Select
      id="course_type"
      readOnly={true}
      IconComponent={IconWrapper}
      variant="standard"
      defaultValue="cr"
      disableUnderline
    />
  );
};

export default SectionTab;

原理说明 #

两种方案都是通过保证IconComponent接收的组件/函数引用稳定，避免React在每次渲染时识别到新的组件类型，从而解决SonarQube的报错，同时图标逻辑内置在SectionTab中，无需每次使用该组件时手动传入图标。

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