React:当在第二个容器中插入(渲染)时,如何等到ref可用?

EDIT:更好的解释

背景。

我从第三台服务器上接收到一些纯HTML代码,我想将其用于

  • 插入我的React应用中
  • 改动

纯粹的JS方法

  • 我可以用regex来修改这个字符串,并在任何HTML标签中添加一个带有 id
  • 然后我可以通过 getElementById照例

React方法

  • 我不应该使用DOM
  • 然后,我应该在字符串中插入一些有React ref的组件。
  • 相反(将一些React组件插入到纯HTML中),则是通过 ReactDOMServer.renderToString
  • 所以,当我给组件注入 ReactDOM.render()的问题是 render 方法需要时间,所以如果在下一行我试图使用存在于插入的组件中的 ref,但还没有出现。

这个问题

  • 怎么做呢?通常我会将代码放在 useEffect 附带 [] 依赖性,但我在这里 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>
  );
}

解决方案:

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
*/

Edit nervous-glade-8rtxb

给TA打赏
共{{data.count}}人
人已打赏
未分类

根据条件角材动态绑定matSuffix和matPrefix 9。

2022-9-9 2:45:22

未分类

我们能否在AWS::CloudFormation::Init中收集实例元数据?

2022-9-9 2:56:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索