如何修复反应/无未转义实体
问题描述 投票：0回答：4
./components/SingleServer.js 144:36 错误：
""“"”""“"”''‘'’''‘'’''‘'’''‘'’''‘'’''‘'’""“"”""“"”""“"”""“"”''‘'’''‘'’我写的代码->
import { Fragment, useRef, useState } from 'react';
import { Dialog, Transition } from "@headlessui/react";
import { ExclamationIcon } from "@heroicons/react/solid";
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { LinkIcon } from "@heroicons/react/24/outline";
import { useEffect } from "react";
import axios from "axios";
const SingleServer = ({ title, content, likes, comments, hoster, dislikes, ip, port, max, serverId, ver }) => {
const [likeCount, setLikeCount] = useState(likes || 0);
const [dislikeCount, setDislikeCount] = useState(dislikes || 0);
const [open, setOpen] = useState(false);
const cancelButtonRef = useRef(null);
const [hosterName, setHosterName] = useState("Unknown User");
const handleLike = () => {
// Make a POST request to the server liking API
axios
.post(`/api/server/like?id=${serverId}`)
.then((response) => {
if (response.status === 200) {
// Check if the user has already liked the server
const userHasLiked = response.data.message.includes("liked");
// Update like count based on user's like status
setLikeCount(likeCount + (userHasLiked ? -1 : 1));
}
})
.catch((error) => {
console.error("Error liking/unliking the server:", error);
});
};
const handleDislike = () => {
// Make a POST request to the server disliking API
axios
.post(`/api/server/dislike?id=${serverId}`)
.then((response) => {
if (response.status === 200) {
// Check if the user has already disliked the server
const userHasDisliked = response.data.message.includes("disliked");
// Update dislike count based on user's dislike status
setDislikeCount(dislikeCount + (userHasDisliked ? -1 : 1));
}
})
.catch((error) => {
console.error("Error disliking/undisliking the server:", error);
});
};
const handleJoin = () => {
setOpen(true);
};
useEffect(() => {
// Fetch user data from /api/users
axios
.get("/api/users")
.then((response) => {
const users = response.data;
const user = users.find((user) => user.email === hoster);
if (user) {
setHosterName(user.name);
}
})
.catch((error) => {
console.error("Error fetching user data:", error);
});
}, [hoster]);
return (
<div className="text-post bg-gray-800 text-white rounded-lg shadow-md p-4 my-4">
<h3 className="text-xl font-semibold">{title}</h3>
<p className="text-gray-300">{content}</p>
<p className="text-gray-500">---------------</p>
<p className="text-gray-400">Shared by "{hosterName}"</p>
<p className="text-gray-400">Players Limit- "{max}"</p>
<p className="text-gray-400">Server Version- "{ver}"</p>
<div className="post-interactions mt-2 flex space-x-4">
{/* Like Button */}
<button
onClick={handleLike}
className="py-1 px-2 bg-green-600 text-white rounded-md shadow-md hover:bg-green-700"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
</svg>
</button>
<span className="text-green-500"> {likeCount}</span>
{/* Dislike Button */}
<button
onClick={handleDislike}
className="py-1 px-2 bg-red-600 text-white rounded-md shadow-md hover:bg-red-700"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384" />
</svg>
</button>
<span className="text-red-500">{dislikeCount}</span>
{/* Join Button */}
<button
onClick={handleJoin}
className="py-2 px-4 bg-blue-600 text-white rounded-md shadow-md hover:bg-blue-700"
>
Join
</button>
</div>
{/* ... Dialog Code ... */}
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto ">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg text-white shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-gray-900 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
<LinkIcon className="h-6 w-6 text-indigo-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-200">
Join Server "{title}" by Completing the Steps! 🌌🎮
</Dialog.Title>
<div className="mt-2">
<ul class="text-sm text-gray-400 list-disc list-inside">
<li>Open <strong>Minecraft</strong>🌍🪐</li>
<li>Sign in with Microsoft🛡️🔗</li>
<li>Click on <strong> 'Play' </strong>🚀🌠</li>
<li>Navigate to the <strong>'Server' tab</strong> 🌐🔮</li>
<li>Click on <strong>'Add Server'</strong>🧵🌌</li>
<li>Enter the IP address: "<strong>{ip}</strong>" and Port: "<strong>{port}</strong>"⚡</li>
<li>Press <strong>'Join Server'</strong>& enjoy the adventure! 🏞️🏰</li>
</ul>
</div>
</div>
</div>
</div>
<div className="bg-gray-800 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto"
onClick={() => setOpen(false)}
>
Done
</button>
<button
type="button"
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
onClick={() => setOpen(false)}
ref={cancelButtonRef}
>
Cancel
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
</div>
);
};
export default SingleServer;
代码正在运行，但正在运行
yarn build
我收到此错误
4个回答
0
投票
投票
此规则可防止您可能认为是 JSX 转义字符的字符被意外注入为 JSX 语句中的文本节点。
<MyComponent
name="name"
type="string"
foo="bar"> {/* oops! */}
x="y">
Body Text
</MyComponent>
例如，如果将结束 > 放在标签中，则其正文将呈现为
x="y"> Body Text
可以替换为>
;>
可以替换为"
、"
、“
或"”
可以替换为'
、'
、‘
或'’
可以替换为}}
-1
投票
投票
这是一个 linter 错误
-1
投票
投票
您可以避免转义，并通过使用模板文字来使代码看起来更好。
例如。
替换->
<p className="text-gray-400">Shared by "{hosterName}"</p>
至 ->
<p className="text-gray-400">{`Shared by "${hosterName}"`}</p>
-2
投票
投票
您收到的错误是由于您在代码中使用未转义的实体而引起的。这意味着字符“'和”没有被转义，这导致React将它们解释为HTML实体。
要解决此问题，您需要使用 \ 字符转义这些字符。例如下面的代码：
<h3>This is a title with an "apostrophe"</h3>
需要更改为：
<h3>This is a title with an "apostrophe"</h3>
要转义代码中所有未转义的实体，您可以使用以下函数：
function escapeEntities(str) {
return str.replace(/"/g, """).replace(/'/g, "'");
}
然后，您可以在渲染代码之前使用此函数转义代码中的实体。例如：
const title = "This is a title with an apostrophe";
const escapedTitle = escapeEntities(title);
<h3>{escapedTitle}</h3>
这将渲染没有任何未转义实体的标题，并且错误将消失。我希望这有帮助！如果这是错误的，要么我没有完全理解它，要么它超出了我的范围，如果您有任何问题，请告诉我。
最新问题
- Python 中的回溯（最近一次调用最后一次）错误
- PR审核通过后触发具体工作流程
- EasyApache4 更新覆盖 htaccess 文件
- commercetools nodejs sdk 使用 where 或 withWhere 进行查询不起作用
- 用C#打印控件的整个区域
- Azure Powershell - 将应用程序权限添加到委派权限
- 非泛型函数失败
- 将 GStreamer RTSP 视频管道嵌入到 QT GUI 中
- ValueError：调用PositionalEmbedding.call()时遇到异常
- Maya Python：下拉菜单与按钮对齐
- 为什么AWS有自己的UUID版本？
- 如何在Windows上使用pdfium打印pdf文件
- 为 Spring JPA 存储库方法配置切入点
- Excel 输入框：对形状进行分组并为具有唯一名称的组命名
- 在 TMS WEB Core 中找不到单元“System.Diagnostics”
- quasar dev 每 5 秒自动刷新一次，我如何阻止它这样做？
- 字符串函数未解析所有字符
- 使用 %p 计算 printf 中的表达式
- 用户和角色在 symfony 2.8 中是不同的实体
- Woocommerce CRM 连接
© www.soinside.com 2019 - 2024. All rights reserved.