Question

关于我的项目的一些背景知识-我正尝试从我在网上找到的颜色API中获取一些信息，并使用它来创建当日应用程序的颜色。基本上，它使用React从API获取十六进制值，然后我要将网页的背景色设置为该十六进制颜色。唯一的问题是，我从API接收到的十六进制值前面没有'＃'。由于我是Java和React的新手，因此我尝试从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>中正确设置'style'变量的格式。如果我在这两件事上都能得到帮助，那就太好了！谢谢！

Answer 1

这应该有效

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

React.js-从API中获取数组数据并在其上添加一个＃号以形成十六进制颜色

1 个答案: