如何在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 prop来自于api和post。sanitizedHtml基本上包含原始html的标签，如p,h2等

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

但我认为没有方法在反应像文档。querySelector or document.getElementBy:Id/Classname

也参我想我不能使用,因为数据是动态进来和我不能写ref ={一}作为道具

那么我该如何访问里面的p标签呢post。sanitizedhtml

?感谢您的快速回复。

Answer 1

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

阅读更多关于子节点的信息

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

Answer 2

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

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