标签上的道具"徽标"值无效<img>。要么将其从元素中删除，要么传递字符串或数字值以将其保留在 DOM 中

Question

在我的应用程序中，我有亮模式和暗模式。为了在两种标志颜色之间切换，因为在某个点上的文本必须是白色和另一种深色，我做了这个：

import React from "react";
import { ThemeContext } from "./themeContext";

const LogoToggle = () => {
const { theme, setTheme } = React.useContext(ThemeContext);

return (
<div>
{theme === "dark" ? (
<a href="./">
<img
logo={() => setTheme(theme === "dark" ? "light" : "dark")}
className="block h-8 w-auto"
src="Assets/img/logo-dark.svg"
alt="Tribeto logo"
/>
</a>
) : (
<a href="./">
<img
logo={() => setTheme(theme === "dark" ? "light" : "dark")}
className="block h-8 w-auto"
src="Assets/img/logo-light.svg"
alt="Tribeto logo"
/>
</a>
)}
</div>
);
};

export default LogoToggle;

但由于某种原因，我在控制台中不断出现错误，我尝试了一些不同的方法，但我所做的一切都破坏了功能。

确切的错误如下：

警告：标记上道具logo的值无效。将其从元素中移除，或者传递字符串或数值以将其保留在DOM中。有关详细信息，请参阅https://reactjs.org/link/attribute-behaviorimg一divLogoToggle@http：//localhost:3000/static/js/bundle.js:7742:42divdivdivdivdivDashboard@http：//localhost:3000/static/js/bundle.js:420:88仪表板Routes@http：//localhost:3000/static/js/bundle.js:116348:7Router@http：//localhost:3000/static/js/bundle.js:116285:7BrowserRouter@http：//localhost:3000/static/js/bundle.js:115758:7应用程序担心身体ThemeProvider@http：//localhost:3000/static/js/bundle.js:7232:7

Answer 1

imgHTML元素上没有logo属性，如果有，则尝试为其分配函数，而不是字符串。

如果要切换亮/暗状态，可以将onClick属性添加到徽标包装中。我还简化了图像交换，因为两个图像共享相同的标记。

const LogoToggle = () => {
const { theme, setTheme } = React.useContext(ThemeContext);
return (
<div onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
<img
className="block h-8 w-auto"
src={theme === 'dark' ? "Assets/img/logo-dark.svg" : "Assets/img/logo-light.svg"}
alt="Tribeto logo"
/>
</div>
)
}

编辑：如果您只是想使用正确的深色/浅色徽标，而不使用图像切换模式，您可以将徽标包装在链接中：

const LogoToggle = () => {
const { theme, setTheme } = React.useContext(ThemeContext);
return (
<a href="">
<img
className="block h-8 w-auto"
src={theme === 'dark' ? "Assets/img/logo-dark.svg" : "Assets/img/logo-light.svg"}
alt="Tribeto logo"
/>
</a>
)
}

Answer 2

U需要导入2个svg-s，它不应该抛出错误。U应该为图像标签中使用的每个图像路径执行此操作

import logoDark from "Assets/img/logo-dark.svg"
import logoLight from "Assets/img/logo-light.svg"
<img
className="block h-8 w-auto"
src={theme === 'dark' ? logoDark  : logoLight }
alt="Tribeto logo"
/>