Question

人，我试图在具有节点活力的反应组件中显示颜色的十六进制。（我已安装此节点包）

当我从控制台运行节点时，它正在工作。

|- file.js
|- image.jpg

file.js

// I cannot make it work with ES6 importing
const Vibrant = require('node-vibrant');

let v = new Vibrant('image.jpg')
v.getPalette((err, palette) => console.log(palette.Vibrant.getHex()))

CMD：

node file.js

结果：

#2e5475

当我把它移到我的组件时......

import React, { Component } from 'react'
const Vibrant = require('node-vibrant');

class Hello extends Component {

  helloPalette = palette => {
    console.log(palette)
  }

  render() {

    // I also tried here const Vibrant = require('node-vibrant');

    return (
      {
        let v = new Vibrant('image.jpg')
        v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))
      }
    )
  }
}

export default Hello

我收到以下错误...

Error in ./src/Hello.js 
Syntax error: C:/test/src/Hello.js: let is a reserved word (23:7)  

    21 |     return (
    22 |       {
  > 23 |        let v = new Vibrant('image.jpg')
       |        ^
    24 |        v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))
    25 | 
    26 |       }

和...

如果我将var声明更改并移动到var v;功能下面...... 编译失败。 ./src/Hello.js出错语法错误：C：/test/src/Hello.js：意外的令牌（10：4）

或者...

如果我在return（）之前更改并移动var以及期望的令牌，预期，

任何人都可以提供光......有没有人使用这个或与React类似的东西......？将不胜感激任何帮助。周末愉快

Answer 1

您需要先声明对象并更正一些语法错误，然后将其返回。

...
let v = new Vibrant('image.jpg')
return v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))

Answer 2

对于感兴趣的人，您可以使用react-palette软件包为您完成工作：

yarn add react-palette

您的代码将如下所示：

import Palette from 'react-palette'

<Palette image={IMAGE_URL}>
  {palette => (
    <div style={{ color: palette.vibrant }}>
      Hello world
    </div>
  )}
</Palette>

由于util function，该程序包在内部使用了node-vibrant，因此如果您有兴趣，可以看看它！

节点充满活力的包和反应

2 个答案: