使用 refs 修改 React.js 中的元素

Posted 2023-02-25

【中文标题】使用 refs 修改 React.js 中的元素

【英文标题】：Using refs to modify an element in React.js

【发布时间】：2021-02-20 22:42:57

【问题描述】：

使用 refs 修改元素的属性有错吗？如果是这样，为什么？ 示例：

myRef.current.innerhtml = "Some content";

【参考方案1】：

错了如果可以修改组件的 JSX 来实现更改。只要有可能，就应该能够确定仅从组件的当前状态呈现的 JSX；像 .innerHTML 这样的直接 DOM 突变副作用只有在没有其他可能的选择时才应该这样做。

对于这种情况，请将内容放入状态变量中，例如：

const [spanContents, setSpanContents] = useState('foobar');

const changeSpanContents = () => 
  setSpanContents('Some content');
;

return (
  <div>
    <button onClick=changeSpanContents>click</button>
    <span>spanContents</span>
  </div>
);

在一些不寻常的情况下，不存在您想要的 DOM 突变的 JSX 语法 - 例如，将 resize 侦听器放在 window 上。在这种情况下，您将不得不求助于使用 vanilla DOM 方法，而不是仅通过 React 来完成。对于这种情况，以下模式很常见：

useEffect(() => 
  const handler = () => 
    // resize detected
  ;
  window.addEventListener('resize', handler);
  return () => 
    window.removeEventListener('resize', handler);
  ;
, []);

【参考方案2】：

我不会说错，但这取决于您在更改 html 之后要做什么。由于React 将失去对该元素的控制，如果您需要处理该DOM，您将很难。此外，这是有风险的，因为 React 对 DOM 有控制，当您手动更改它时，可能会导致意外行为。