Javascript/React：根据状态值更改显示的 SVG 背景答案

【问题标题】：Javascript/React: Change displayed SVG background based on state valueJavascript/React：根据状态值更改显示的 SVG 背景
【发布时间】：2020-05-12 22:20:19
【问题描述】：

我正在为我的 Bootcamp 开发一个项目。设计不是重点，但我想使用整个 kaboodle：同时拥有一个工作产品和一个漂亮的前端来展示它。我使用 .SVG 作为通过 CSS 设置的显示背景，到目前为止，我已经成功地根据 CSS 媒体查询更改了显示的 SVG。但是，我对根据 state/props 中保存的值进行更改的可能性感兴趣。

该项目的重点是图像查看器和用户投票/排名系统。我正在考虑根据照片的类别更改背景，这将是保存在包含照片/用户数据的数组内部的状态中的值。假设类别是“狗”，我想显示相应的背景。但是当用户更改为另一张照片并且其类别为“猫”时，我希望显示不同的背景。我正在使用动画 SVG 作为背景。

对我来说最好的方法是什么？我想我可以将代码添加到用于更改显示照片的函数中。

谢谢！

【问题讨论】：

标签： css reactjs svg background-image

【解决方案1】：

您可以直接根据状态值应用样式。

你也可以使用 ReactSvg 包。它允许您访问 svg 中的节点。

<ReactSVG beforeInjection={(svg) => { 
    const myStyleClass = this.state.myStyle == 'x' ? 'y' : 'z';
    svg.classList.add(''); 
}} src={myImportedImage} />

【讨论】：

因为我使用 SVG 作为背景，所以我通过分配给组件返回的顶级 Div 的 CSS className 调用它，就像这样 -> ``` #svgbkg { display: flex;高度：100%；宽度：100%；背景大小：90%；背景位置：50% 50%；背景重复：重复； background-image: url(../../Styles/SVG/Backgrounds/paw1.svg) ``` 带有媒体查询以根据大小更改 SVG。我怎样才能最好地通过状态更改它，或者我应该将其重构为将其作为导入组件调用？
因此，您可以为顶级 div 创建高阶组件并读取内部状态，根据值设置样式。查看github.com/styled-components/styled-components