如何解决如何在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之类的东西
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。