React.JS组件内编写条件逻辑触发报错如何解决？

错误原因 #

• 你在组件返回JSX、元素还没挂载到真实DOM之前，就调用document.getElementById获取页面元素，此时返回值为null，调用null.style就会触发你截图里的空值报错。
• 你在多个组件实例中复用了相同的id="resultado"，id是全局唯一标识，就算修复了时序问题，后续DOM操作也只会作用在第一个匹配id的元素上，无法给不同的组件实例分别设置颜色。

解决方法 #

React是声明式框架，不推荐直接操作DOM来修改样式，你可以直接给span元素绑定动态内联样式即可，修改CriandoParametros组件代码如下：

import React from 'react';

function CriandoParametros (props){
    const status = props.nota >= 6 ? 'Aprovado' : 'Reprovado';
    // 动态计算结果文本的颜色
    const resultColor = props.nota >= 6 ? '#008000' : '#FF0000';
  
    const frase =  <p>O aluno <strong>{props.aluno}</strong> recebeu a nota: <strong>{props.nota}</strong> e está <span style={{color: resultColor}}>{ status }</span></p>;

    return(
        <div>
            <hr />
           {frase}
        </div>
       )
}

export default CriandoParametros;

修改后删除原来直接操作DOM的代码即可，修改后的逻辑会自动根据传入的nota属性计算对应颜色，多个组件实例之间的样式互不影响。

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