反应：在脚本之前加载 DOM 以防止“无法读取 null 的属性（读取'样式'）”？

Question

我一直在努力解决在 vanilla JS 中对我来说一直很简单的事情，但在 React 中却给我带来了问题。 我只是想在一个元素上运行一个 onClick 事件处理程序，但我继续得到可怕的“无法读取 null 的属性（读取'样式'）”

React 组件内部：

function TestComponent() {

  const testElement = document.querySelector('.test');
    
  const runTest = () => {
      testElement.style.display = "block";
  }

  return (
    <div>
      <div className="test" onClick={runTest}></div>
    </div>
  );
}

export default TestComponent;

但是当我尝试单击“测试”组件时，我不断得到

Uncaught TypeError: Cannot read properties of null (reading 'style')

经过一番研究，听起来我的 DOM 在我的脚本尝试运行之前没有完全加载，导致错误？ 我找到了使用 vanilla JS 来缓解这种情况的方法（本质上，“将你的脚本移动到结束 body 标记的正上方”），但它在 React 中不起作用。

我的问题似乎是它试图过早地运行脚本或其他什么？ 如果是这样，我如何告诉特定组件上的脚本等到 DOM 加载后再运行？

Answer 1

你需要使用 react 的 API 和类似的方法，所以你基本上有两种不同的方法。

使用 createRef 钩子：

function TestComponent() {
  const elementRef = createRef(null);

  const runTest = () => {
    console.log(elementRef);
    elementRef.current.style.display = "block";
    elementRef.current.style.color = "red";
  };

  return (
    <div>
      <div className="test" ref={elementRef} onClick={runTest}>
        test
      </div>
    </div>
  );
}

或使用普通绑定：

function TestComponent() {
  const [color, setColor] = useState("black");

  const runTest = () => {
    setColor("red");
  };

  return (
    <div>
      <div
        className="test"
        style={{
          color: color
        }}
        onClick={runTest}
      >
        test
      </div>
    </div>
  );
}