不断观察条件是否为真，而无需在ReactJs中进行渲染

如何解决不断观察条件是否为真，而无需在ReactJs中进行渲染

在我的react项目中，我有一个要求，我必须连续检查条件并在条件变为真时立即调用函数。

条件如下：

var El = document.activeElement;
if(document.getElementById('myInputField').getAttribute('aria-invalid') === 'true'
   && !(document.getElementById('myInputField') === El) {

       // function call

}

这在ReactJs中如何实现？

我也可以使用jquery / javascript。

其他详细信息： 我正在使用外部项目中的输入字段。输入字段检查提供的输入并更改其自己的aria-invalid属性。 如果用户使用无效的输入提交表单，我想检查aria-invalid是否为真，并且焦点不在输入字段上。

解决方法

以下示例显示了正确和不正确的方式来操作DOM（在React的上下文中）：

// -> Imports
import React,{ useEffect,useState } from "react";

// -> Element Ids
const subHeading = "sub-heading";

// -> DOM Manipulator
// -> Don't do this,opt for conditional style instead
// -> Check h1 element for example
function sideEffect() {
  document.getElementById(subHeading).style.color = "red";
}

// -> Time Constant
const fiveSeconds = 5000;

export default function App() {
  // -> State
  const [readCond,writeCond] = useState(false);
  // -> Side Effects
  // -> Change readCond to true after five second pause
  useEffect(() => {
    setTimeout(() => writeCond(true),fiveSeconds);
  },[]);
  // -> Trigger DOM manipulation when readCond is true
  useEffect(() => {
    if (readCond) sideEffect();
  },[readCond]);
  return (
    <div>
      <h1 style={{ color: readCond ? "red" : "black" }}>React Way - Good</h1>
      <h2 id={subHeading}>DOM Way - Bad</h2>
    </div>
  );
}

Working sandbox