Question

我正在尝试根据从我使用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上的样式属性会出现此错误：

未处理的拒绝（永久违反）：style道具期望从样式属性到值而不是字符串的映射。例如，使用JSX时，样式= {{marginRight：空格+'em'}}。

在搜索Stack Overflow和文档时，我找不到找到解决该问题的方法，同时仍在使用需要使用的值。我尝试过的替代方法如下：

 <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})}} />

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

Answer 1

样式图中的值应为字符串。因此，用引号引起来。另外，由于大概item.wind.deg返回一个数字，因此您需要在其后添加'deg'，以获取rotate函数的有效语法。

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

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

1 个答案: