我怎样才能在反应中访问这个 p 标签内容？

Question

我有这个 obj，我想访问这个 p 标签内容，并通过 props 渲染它。 没有 dangrouslySetInnerHTML 方法。 我该怎么办？

let content = {
    para: `<p>A listing page is the public view of a listing. It should informations be designed to display all relevant information about a listing.</p>`
}

Answer 1

您可以通过DOMParser提取文本，然后使用通常的 JSX 在 JSX 段落中呈现该文本。

 const { useMemo } = React; let content = { para: `<p>A listing page is the public view of a listing. It should informations be designed to display all relevant information about a listing.</p>`, }; const Example = ({ content }) => { const paragraph = useMemo(() => { const parser = new DOMParser(); const doc = parser.parseFromString(content.para, "text/html"); return <p>{doc.querySelector("p").textContent}</p>; }, [content]); return ( <div> Here's the paragraph: {paragraph} </div> ); }; const App = () => { return <Example content={content} />; }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

我在那里使用useMemo ，因为解析似乎已经足够了，值得记住并避免重复。

Answer 2

我会使用String.prototype.slice

 let content = { para: `<p>A listing page is the public view of a listing. It should informations be designed to display all relevant information about a listing.</p>` } const text = content.para.slice(3, -4) console.log(text)

Answer 3

在这个新元素上使用textContent之后，您可以创建一个新元素并将您的content.para值传递给它。 像这样：

const htmlNode = document.createElement('div')
htmlNode.innerHTML = content.para
const sanitizedContent = htmlNode.textContent