reactjs - 在 React.JS 中的组件上创建条件时出错

Question

我的应用程序中有以下组件：

import React from 'react';


function CriandoParametros (props){

    const status = props.nota >= 6 ? 'Aprovado' : 'Reprovado';
  
    const frase =  <p>O aluno <strong>{props.aluno}</strong> recebeu a nota: <strong>{props.nota}</strong> e está <span id="resultado">{ status }</span></p>;

    if(props.nota >= 6){
        document.getElementById("resultado").style.color = '#008000';
      }else{
        document.getElementById("resultado").style.color = '#FF0000';
      }

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

}

export default CriandoParametros;

在我的 index.js 文件中，我将这个组件如下所示：

import React from "react";
import reactDom from "react-dom";
import './index.css';
import Menu from './components/basicos/header';
import Rodape from './components/basicos/footer';
import CriandoParametros from "./components/basicos/ComParametros";

const subtitulo = <h3>Empresa de Engenharia</h3>


reactDom.render(
    <div>
        <Menu></Menu>
        <h2>Fazendo um teste para Engesin</h2>
        { subtitulo }

        <CriandoParametros aluno="Andrêy Ferraz" nota="8.5"/>

        <CriandoParametros aluno="Jose Pereira" nota="5.5"/>

        <Rodape></Rodape>
    </div>
    , document.getElementById("root"));

这给了我以下错误：

我该如何解决这个问题？我现在从 React.JS 开始！

标签： reactjs

Answer 1

操作 DOM 时始终使用useEffect钩子，它会为您节省很多痛苦，也是一种很好的做法正如 Brian 所说，在不必要时操作 dom 是一种反模式

更新代码：

import React, {useEffect} from 'react'; //modified


function CriandoParametros (props){
  //modification - start
   useEffect(() => {
        const el = document.getElementById("resultado");
        if(el) el.style.color = props.nota >= 6 ? '#008000' : '#FF0000';
   }, [props.nota])
  // end
    const status = props.nota >= 6 ? 'Aprovado' : 'Reprovado';
  
    const frase =  <p>O aluno <strong>{props.aluno}</strong> recebeu a nota: <strong>{props.nota}</strong> e está <span id="resultado">{ status }</span></p>;

    

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

}

export default CriandoParametros;