反应.js - 从 API 获取数组数据并对其修正'#'以形成十六进制颜色



关于我的项目的背景 - 我正在尝试从我在线找到的颜色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)}

相关内容

  • 没有找到相关文章

最新更新