3

编辑：更好的解释

上下文：

我从第三台服务器收到一些纯 HTML 代码，我想

  • 插入我的 React 应用程序
  • 修改它

香草 JS 方法

  • 我可以使用正则表达式修改字符串并添加任何 HTML 标记id
  • getElementById然后我可以像往常一样通过 修改这些元素

反应方法

  • 我不应该使用 DOM
  • 然后我应该在字符串中插入一些内部有 React ref 的组件
  • 相反（将一些 React 组件插入为纯 HTML）将通过ReactDOMServer.renderToString
  • 所以，当我用 注入组件时ReactDOM.render()，问题是该render方法需要时间，所以如果在下一行我尝试使用插入组件中存在的 ref，则还不存在

问题

  • 怎么做？通常我会将代码放在useEffect具有[]依赖项的 a 中，但在这里我是rendering应用程序已安装时的组件
  • 一个快速的解决方法是只进行 500 毫秒的异步等待，然后我可以访问ref，但肯定有更好的东西

此代码失败，因为在ref呈现时它仍然不可用，因此ref.current未定义

我怎么能等到呢？

密码箱

编辑：我提供了有效的代码，但通过直接 DOM，我认为应该避免

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

export default function App() {
  const myref = useRef();

  useEffect(() => {
    const Com = () => <div ref={myref}>hello</div>;
    ReactDOM.render(<Com />, document.getElementById("container"));
    console.log(myref.current); // undefined
    document.getElementById('container').textContent = "direct DOM works"

   // the next line fails since the ref is not yet available
   // myref.current.textContent = "but this REF is not available"; // fails
  }, []);

  const plainhtml = '<div><div id="container"></div><div>some more content</div><div id="another">even more content</div></div>'; // this is some large HTML fetched from an external server

  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{ __html: plainhtml }} />
    </div>
  );
}
4

2 回答 2

2

useEffect在第一次渲染后执行空依赖数组，因此您将在回调中获得 DOM ref：

const htmlString = '<div id="container">Hello</div>';

export default function App() {
  const myRef = useRef();

  useEffect(() => {
    if (myRef.current) {
      myRef.current.textContent = 'whats up';
    }
    console.log(myRef.current);
  }, []);

  return (
    <div>
      <div ref={myRef} dangerouslySetInnerHTML={{ __html: htmlString }} />
      <div dangerouslySetInnerHTML={{ __html: htmlString }} />
    </div>
  );
}

/* App renders:
whats up
Hello
*/

编辑nural-glade-8rtxb

于 2020-04-24T12:33:41.653 回答
1

我需要使用回调 ref但将其封装在其中useCallback以确保它仅使用指示的依赖项（即 none []）重新呈现，以便仅在组件更改时执行它（如此处所述）

密码箱

import React, { useEffect, useCallback } from "react";
import ReactDOM from "react-dom";

export default function App() {
  const measuredRef = useCallback(node => {
    if (node !== null) {
      node.textContent = "useCallback DOM also works";
    }
  }, []);

  useEffect(() => {
    const Com = () => <div ref={measuredRef}>hello</div>;
    ReactDOM.render(<Com />, document.getElementById("container"));
    document.getElementById("container").textContent = "direct DOM works";
  }, []);

  const plainhtml = '<div id="container"></div>';

  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{ __html: plainhtml }} />
    </div>
  );
}
于 2020-04-24T13:54:26.527 回答