ReactJS图标字典渲染替代方案 解决SonarQube未使用Ico变量报错

SonarQube的静态检测未识别到JSX语法中<Ico />调用的就是你声明的Ico变量，因此误判该变量未使用，触发报错。

方案1：使用React.createElement API渲染 #

直接调用React官方渲染API，无需额外声明Ico变量，从根源避免变量未使用的检测报错：

const ReactPage = (props) => {
    const {nomeClasse} = props
    const icon = {};
    icon[opcaoAvaliacao.Satisfeito] = InsertEmoticonRoundedIcon;
    icon[opcaoAvaliacao.Neutro] = SentimentSatisfiedRoundedIcon;
    
    const render = () => {
        return React.createElement(
            icon[nomeClasse],
            { className: `iconeDescricao${nomeClasse}` }
        );
    };
}

方案2：直接调用图标函数传参 #

你使用的Material UI类图标本质是纯函数组件，可以直接调用函数传入props，不需要用JSX组件语法，也不用声明额外变量：

const render = () => {
    return icon[nomeClasse]({ className: `iconeDescricao${nomeClasse}` });
};

补充说明 #

你提供的原始代码存在变量名拼写错误：props解构得到的是nomeCLasse（第二个L大写），后续使用的是nomeClasse（第二个L小写），需要统一拼写避免运行时报错。
如果希望保留原有JSX写法，也可以在报错行添加SonarQube忽略注释：const Ico = icon[nomeClasse]; // NOSONAR 即可跳过该行检测。

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