如何在 Ionic React 中动态更改图像？

Question

我是 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 属性未知，因为 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;

Answer 1

当涉及到 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 可用于从树中的任何组件更新主题。在你的情况下是 darkmodeswitch，这里我们切换值

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等

如何在 Ionic React 中动态更改图像？

How can I change an image dynamically in Ionic React?

reactjs

ionic-react