在 ReactJS 的地图中使用道具进行 CSS 转换答案

【问题标题】：CSS transform using a prop, within a map in ReactJS在 ReactJS 的地图中使用道具进行 CSS 转换
【发布时间】：2019-03-01 13:25:58
【问题描述】：

我正在尝试根据从我正在使用map 处理的数组中获得的值来旋转图像。代码是这样的：

render() {
    return (
        this.props.currentForecast.list.map(item => (

                <div className="weatherTile" key={item.dt_txt}>
                    <p>{item.dt}</p>
                    <img src={"http://openweathermap.org/img/w/" + item.weather[0].icon + ".png"} />
                    <p>{item.main.temp}</p>
                    <p>{item.weather[0].description}</p>
                    <img src="img/arrow.svg" style={{transform: rotate(${item.wind.deg})}} />
                    <p>{item.wind.speed}mph</p>
                </div>
            ))
        )
    }

但是，img 上的样式 attr 给出了这个错误：

未处理的拒绝（不变违规）：style 属性需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时 style={{marginRight: spacing + 'em'}}。

搜索堆栈溢出和文档，我找不到解决这个问题的方法，同时仍然使用我需要使用的值。我尝试过的替代方案如下：

 <img src="img/arrow.svg" style={`transform: rotate(${item.wind.deg})`} />
 <img src="img/arrow.svg" style={{`transform: rotate(${item.wind.deg})`}} />
 <img src="img/arrow.svg" style={{transform: rotate(${item.wind.deg})}} />

所有这些都以某种方式破坏了页面。这样做的正确方法是什么？

【问题讨论】：

你能共享数组吗？度数是多少？

标签： reactjs

【解决方案1】：

样式映射中的值应该是一个字符串。所以用引号括起来。此外，由于item.wind.deg 可能返回一个数字，因此您需要在其后添加 'deg' 以获得rotate 函数的有效语法。

<img src="img/arrow.svg" style={{transform: `rotate(${item.wind.deg}deg)`}} />

【讨论】：

这不会引发错误 - 但 img 不会使用样式标签渲染或旋转，因此情节变厚了。
如果您在开发工具中查看任何浏览器，它是否显示了应用于 img 组件的转换属性？也许语法不是 100% 正确，在这种情况下它会被划掉。
在 vanilla 开发工具中，什么都没有——没有样式标签，也没有样式表中的样式。但在 React 开发工具中，这会出现在 props 中： style: {transform: "rotate(346.5)"}
由于语法错误，它没有出现在 dom 树上。显然，旋转期望括号之间的值采用“90deg”的形式，就像在度数后面有字母“deg”一样。我会更新答案。
啊！我应该自己发现的。非常感谢，已经解决了。