Css Javascript/React：根据状态值更改显示的SVG背景
我正在为我的训练营做一个项目。设计不是重点，但我想做的是整个卡布多：有一个工作的产品和一个好看的前端来展示它。我使用.SVG作为通过CSS显示的背景集，到目前为止，我已经成功地基于CSS媒体查询更改了显示的SVG。然而，我对基于状态/道具中的值进行更改的可能性感兴趣 该项目的重点是一个图像查看器和用户投票/排名系统。我想根据照片的类别改变背景，这将是保存照片/用户数据的数组中的状态值。假设类别为“Dog”，我想显示相应的背景。但当用户更改为另一张照片，其类别为“Cat”时，我希望显示不同的背景。我正在与动画SVG的背景 对我来说最好的方法是什么？我想我可以将代码添加到用于更改显示照片的函数中Css Javascript/React：根据状态值更改显示的SVG背景,css,reactjs,svg,background-image,Css,Reactjs,Svg,Background Image,我正在为我的训练营做一个项目。设计不是重点，但我想做的是整个卡布多：有一个工作的产品和一个好看的前端来展示它。我使用.SVG作为通过CSS显示的背景集，到目前为止，我已经成功地基于CSS媒体查询更改了显示的SVG。然而，我对基于状态/道具中的值进行更改的可能性感兴趣 该项目的重点是一个图像查看器和用户投票/排名系统。我想根据照片的类别改变背景，这将是保存照片/用户数据的数组中的状态值。假设类别为“Dog”，我想显示相应的背景。但当用户更改为另一张照片，其类别为“Cat”时，我希望显示不同的背景。
谢谢大家! 您可以直接基于状态值应用样式 您还可以使用SVG包。它允许您访问svg内部的节点
<ReactSVG beforeInjection={(svg) => {
const myStyleClass = this.state.myStyle == 'x' ? 'y' : 'z';
svg.classList.add('');
}} src={myImportedImage} />
{
const myStyleClass=this.state.myStyle=='x'？'y'：'z'；
svg.classList.add（“”）；
}}src={myImportedImage}/>