如何在 React 中访问动态创建的 DOM 元素

Question

这与我排除任何其他 div 的情况类似：

import React from "react";

export default function Post({post}) {

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

    )
}

这个 post 道具来自 api 和 post.sanitizedHtml 基本上包含原始的 html，带有诸如 p ,h2 等标签

我想要的是 访问 post.sanitizedHtml 内的 p 标签，这样我就可以使用 javascript 属性 .textContent在上面提取信息。

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

这样的反应方法

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

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

感谢您的快速回复。

Answer 1

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

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

then lookup from myElement

Answer 2

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

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>
  )
}

如何在 React 中访问动态创建的 DOM 元素

How to access a dynamically created DOM element in react

jsx

reactjs

react-dom

react-hooks

use-ref