如何将 json 文件中的数字表达式 ' 等字符更改为小引号等特殊字符？

Question

当网络通信与模拟数据完成时，如何将json文件中的数字表达式'等字符更改为small quotation marks等特殊字符?

"snippet": {
"publishedAt": "2021-05-21T03:46:13Z",
"channelId": "UC3IZKseVpdzPSBaWxBxundA",
"title": "BTS (방탄소년단) 'Butter' Official MV",

输入图片描述

export default function Home() {
const {
isLoading,
error,
data: bts,
} = useQuery(["bts"], async () => {
return fetch("data/bts.json").then((res) => res.json());
});
if (isLoading) return <p>Loading...</p>;
if (error) return <p>{error}</p>;
return (
<div className={styles.video}>
{bts.items.map((video) => (
<VideoCard
key={video.id.videoId}
id={video.id.videoId}
thumbnails={video.snippet.thumbnails.medium}
title={video.snippet.title}
channel={video.snippet.channelTitle}
publish={video.snippet.publishTime}
/>
))}
</div>
);
}

I bring the data in this way

调用实际url是否反映正常的特殊字符?

Answer 1

可以使用dangerouslySetInnerHTML来渲染html实体

const App = () => {
const title = 'BTS (방탄소년단) 'Butter' Official MV'

return (
<div>
<h1 dangerouslySetInnerHTML={{__html: title}} />
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);

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

你也可以创建一个函数，它会给你解码的html字符串。

const decodeHtml = (html) => {
let txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
console.log(decodeHtml("BTS (방탄소년단) 'Butter' Official MV"));