关于我的项目的背景 - 我正在尝试从我在线找到的颜色API中获取一些信息,并使用它创建一天的颜色。基本上,它使用React从API获取十六进制值,然后我想将网页的背景颜色设置为该十六进制颜色。唯一的问题是,我从API中获得的十六进制值在其前面没有"#"。由于我是JavaScript的新手并做出了反应,因此我正在尝试从API中赋予我的十六进制代码,在其开头中添加一个"#",然后将该值设置为我的背景颜色。我只是不太确定该语法,因为我是JS的新手。它不是太多的代码,我还将包括指向我正在使用的API的链接。任何帮助将不胜感激!
import React, { Component } from "react";
import "./App.css";
class App extends Component {
constructor() {
super();
this.state = {
items: [],
isLoaded: true
};
}
componentDidMount() {
fetch("http://www.colr.org/json/colors/random/7")
.then(res => res.json())
.then(res => {
this.setState({
isLoaded: true,
items: res.colors
});
});
}
render() {
var { items, isLoaded } = this.state;
var itemName = items.map(item => (
<div key={item.id}>{item.tags[0].name}</div>
));
var itemHex = items.map(item => <div key={item.id}>{item.hex}</div>);
if (!isLoaded) {
return (
<div>
<h1>Not Loaded!</h1>
</div>
);
} else {
return (
<section style={{ backgroundColor: { itemHex } }} className="App">
<h1>today's color of the day is: {itemName}</h1>
<h2>Hex:{itemHex}</h2>
</section>
);
}
}
}
export default App;
我正在使用的API是:http://www.colr.org/json/colors/random/7
基本上,我不太确定如何到1。)将'#"#"附加到变量'itemHex'和2.)正确地格式化我的<section>
中的"样式"变量。如果我能在这两种方面得到一些帮助,那就太棒了!谢谢!
这应该有效
colors.forEach(color => color.hex = '#' + color.hex)
使用链接中提供的示例的结果:
0: {timestamp: 1187574525, hex: "#bdd5e0", id: 43679, tags: Array(2)}
1: {timestamp: 1187574417, hex: "#af3f4a", id: 41216, tags: Array(2)}
2: {timestamp: 1187574348, hex: "#a56149", id: 12284, tags: Array(2)}
3: {timestamp: 1187574327, hex: "#a195b3", id: 39159, tags: Array(2)}
4: {timestamp: 0, hex: "#591d35", id: 5464, tags: Array(2)}
5: {timestamp: 1187574615, hex: "#c8d1b8", id: 8433, tags: Array(3)}
6: {timestamp: 1111913319, hex: "#819eca", id: 8406, tags: Array(2)}