1

我对 React 和 TypeScript 很陌生，我遇到了这个问题：

在我的 UI 中，我使用了几个装饰图形，如下所示：

import Kitten from './img/Kitten.png';
<img className="Image" src={Kitten} />

现在，我有一个暗模式切换。当它触发时，我想用适当的暗模式版本替换所有图像。我在想这样的事情：

import Kitten from './img/Kitten.png';
import DarkKitten from './img/DarkKitten.png';

//gets called when dark mode is toggled on or off
const darkModeToggleFunc = () => {
  document.querySelectorAll('.Image').forEach(element => {
    if(element.src.includes("Dark")) {
      element.src = element.src.replace("Dark", "");
    } else{
      element.src = "Dark" + element.src;
    }
  });
}

<img className="Image" src={Kitten} />

现在，在 React 中我有两个问题： .src-attribute 是未知的，因为element它不一定是图像，第二个问题是：我没有将 URI 分配为 src，而是从导入中分配变量。所以实际上没有我可以更改的字符串......如果我被正确告知，React 使用 Base64 来处理以这种方式指定的图像。

我怎样才能在 React 中实现我的目标？

编辑：App.tsx

//bunch of imports
const App: React.FC = () => {

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/page/:name" component={Page} exact />
            <Redirect from="/" to="/page/Production" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;
4

1 回答 1

2

首先，当涉及到 react 时，您不会直接去更改文档级别的内容，而是更新虚拟 DOM 并让 react 处理其余的事情。

你的场景是改变应用程序的主题，这个答案是关于使用 React 上下文来改变主题并适当地使用图像。

首先，您创建一个包含主题值的 Context

const AppContext = createContext({
  theme: "light",
  setTheme: (theme) => {}
});

在这里，为了简单起见，我们将使用状态变量，你可以使用任何你喜欢的东西。这是 app.js 文件

export default function App() {
  const [theme, setTheme] = React.useState("light");

  const themeState = { theme, setTheme };

  return (
    <AppContext.Provider value={themeState}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <ImageViewer />
        <DarkModeSwitch />
      </div>
    </AppContext.Provider>
  );
}

在这里，我们在状态中设置主题值并将上下文设置为该值，setTheme 可用于从树中的任何组件更新主题。在你的情况下，暗模式开关，我们在这里切换值

const DarkModeSwitch = () => {
  const { theme, setTheme } = useContext(AppContext);

  const darkModeToggle = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={theme === "light"}
        onChange={() => darkModeToggle()}
      />
    </div>
  );
};

满足您的主要要求，图像，让我们使用一个通用文件来处理包含内容的图像

export const Kitten ="image source 1";
export const KittenDark ="image source 2";

您只需根据主题设置图像，如下所示

import { Kitten, KittenDark } from "./images";

export default function ImageViewer() {
  const { theme } = useContext(AppContext);

  return (
    <img
      alt="kitten"
      style={{ height: 50, width: 100 }}
      src={theme === "light" ? Kitten : KittenDark}
    />
  );
}

正如你所看到的，一切都是通过上下文连接的，一旦你更新了上下文，你就可以看到图像发生了变化。你可以在这里看到一个工作版本 https://codesandbox.io/s/react-theme-switch-3hvbg

这不是“THE”方式，这是处理需求的一种方式，您可以使用 redux 等

于 2020-10-16T18:18:27.340 回答