如何在反应中访问动态创建的 DOM 元素答案

【问题标题】：How to access a dynamically created DOM element in react如何在反应中访问动态创建的 DOM 元素
【发布时间】：2021-11-24 14:45:14
【问题描述】：

这与我所拥有的类似，不包括任何其他 div：

import React from "react";

export default function Post({post}) {

<div className="postDesc">
    {post.sanitizedHtml} //This contains p tag inside
</div>

    )
}

这个 post prop 来自一个 api，而 post.sanitizedHtml 基本上包含带有 p 、h2 等标签的原始 html。

我想要访问 post.sanitizedHtml 中的 p 标签，以便我可以在其上使用 javascript 属性 .textContent 并提取信息。

但我认为没有像 document.querySelector 或 document.getElementBy:Id/Classname

这样的反应方法

另外我认为我不能使用 refs，因为数据是动态输入的，我不能将 ref={something} 写为道具

那么我应该怎么做才能访问 post.sanitizedHtml 中的 p 标签？

感谢您的快速响应。

【问题讨论】：

你用dangerouslySetInnerHTML试过了吗？
@HarshitRastogi 我认为这只会呈现我在网站其他页面上完成的整个 html，但我只想要 p 标签如何访问它？
@Saswat 您可以在外部 div 上设置 ref，并访问其子节点。这显然意味着您必须事先知道要在动态 html 中访问的内容。
感谢@AbhishekSharma 的精彩建议。我在想类似的事情。如果您可以修改我的代码并将其发布为我如何准确访问 div 上的子节点的答案，那就太好了

标签： reactjs react-hooks jsx react-dom use-ref

【解决方案1】：

通过在外部 div 上设置 ref，您可以访问其子节点并根据需要更改它们的属性。

Read more about Child Nodes

import React, { useRef, useEffect } from 'react';

export const Post = ({post}) => {
  
  const containerRef = useRef(null);
  
  //Let's Change something inside the post
  useEffect(() => {
    if(!post.sanitizedHtml || !containerRef.current) return;
    
    const container = containerRef.current;
    const childNodes = container.childNodes; //This will be a list of child nodes
    /* let's say 0th element of childNodes is a p tag */
    childNodes[0].innerText = "Hey I changed Something";
    
    
  }, [post, containerRef])
  
  return(
    <div className="postDesc" ref={containerRef}>
      {post.sanitizedHtml}
    </div>
  )
}

【讨论】：

【解决方案2】：

在您的情况下，您是否能够使用 javascript 创建一个元素并将 sanitizedHtml 分配给它，然后从新创建的元素中引用它？

const myElement = document.createElement("DIV"); 
myElement.innerHTML = post.santizedHtml;

then lookup from myElement

【讨论】：