道具“徽标”的值无效<img>标签。 从元素中删除它，或者传递一个字符串或数字值以将它保留在 DOM 中

Question

在我的应用程序中，我有明暗模式。 为了在两个标志 colors 之间切换，因为文本在某些时候必须是白色的，而在另一个黑色中，我做了这个：

    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-behavior img a div LogoToggle@http://localhost:3000/static/js/bundle.js:7472:42 div div div div div Dashboard@http： //localhost:3000/static/js/bundle.js:420:88 仪表板路由@http://localhost:3000/static/js/bundle.js:116348:7 Router@http://localhost:3000/static /js/bundle.js:116285:7 BrowserRouter@http://localhost:3000/static/js/bundle.js:115758:7 App Suspense body ThemeProvider@http://localhost:3000/static/js/bundle. js:7232:7

Answer 1

img HTML 元素上没有logo属性，如果有，您正在尝试为其分配 function，而不是字符串。

如果要切换亮/暗 state，则可以向徽标包装器添加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

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

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"
  />