节点充满活力的包和反应

Question

People，我正在尝试在具有节点活力的反应组件中显示颜色的十六进制。(我安装了此节点包(

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

|- file.js
|- image.jpg

文件.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功能，该软件包在引擎盖下使用node-vibrant，因此如果您有兴趣，可以看看！