我不知道如何在 ReactJS 中以正常形式显示文本

Question

我从服务器接收到这样的文本"Neo-Luddism.<p>Like they are going to stop China or any other country outside US or EU.<p>The most they can hope to do, is to force some companies to move off-shore.<p>Wonder where was all this people when Elon Musk started releasing betas on FSD.<p>Self-appointed &#x27;Center for AI and Digital Policy&#x27;, nothing more to add"。在这个表单中，它被显示出来。我把它作为一个变量(data.text)插入到JSX中。

const Text = () => {
return (
<div className={styles.text}>{data.text}</div>
)}

如何使它显示正常字符而不是&#х27;?

我找不到任何可以帮助我的东西

Answer 1

你的内容看起来像html，试试:dangerouslySetInnerHTML。

import React from "react";
import "./styles.css";
const list = [
'<p>This Emmy winning series is a comic look at the assorted humiliations and rare triumphs of a group of girls in their 20s.</p>',
'<p><b>Good Girls</b> follows three "good girl" suburban wives and mothers who suddenly find themselves in desperate circumstances and decide to stop playing it safe, and risk everything to take their power back.</p>'
];
const getItems = () => new Promise((resolve) => setTimeout(() => resolve(list), 1000));
export default function App() {
const [items, setItems] = React.useState([]);
React.useEffect(() => {
getItems().then((result) => setItems(result));
}, []);
if (!items.length) {
return 'Loading...';
}
return (
<div className="App">
<ul>
{items.map((item) => (
<li dangerouslySetInnerHTML={{ __html: item }} />
))}
</ul>
</div>
);
}

No CodeSandbox: https://codesandbox.io/s/sweet-lewin-dwqr0

Ref。: https://pt.stackoverflow.com/questions/434520/innerhtml-no-react