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

问题描述

我是React和TypeScript的新手，我遇到了这个问题：

在我的用户界面中，我使用了几种装饰性图形，如下所示：

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;

解决方法

首先要做出反应，您不要直接去更改文档级别的事情，而是要更新虚拟DOM，然后让反应来处理其余的事情。

您的方案是更改应用程序的主题，此答案是使用React上下文更改主题并适当使用图像。

首先，您将创建一个包含主题值的上下文

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之类的东西