如何在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上下文来改变主题并适当使用图像。

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

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等