Question

我正在尝试使用react-palette来获取图像的主色。但是，我似乎无法使其正常工作，因为我遇到了导致我的页面无法正确加载的错误，或者它根本无法正常工作。

最初，我认为问题出在冲突中，所以我尝试在单独的全新React安装中使用它，但是问题仍然存在。我已经尝试使用Github页面上建议的两个示例，但是都没有用。

使用此示例：

import Palette from 'react-palette';
// In your render...
<Palette src={"https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg"}>
  {({ data, loading, error }) => (
    <div style={{ color: data.vibrant }}>
      Text with the vibrant color
    </div>
  )}
</Palette>

我得到：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

在此示例中：

import { usePalette } from 'react-palette'

const { data, loading, error } = usePalette("https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg")

<div style={{ color: data.vibrant }}>
  Text with the vibrant color
</div>

我只是得到一个法线，其文本与主体的颜色相同。

我做错什么了吗？据我了解，文本的color应该更改，但是如果我检查元素，color甚至都没有分配，很可能是因为代码无法正常工作。

编辑：我完整的App.js：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Palette from 'react-palette';

function App() {
  return (
    <div className="App">
      <Palette src={'https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg'}>
        {({ data, loading, error }) => (
          <div style={{ color: data.vibrant }}>
            Text with the vibrant color
          </div>
        )}
      </Palette>
    </div>
  );
}

export default App;

Answer 1

react-palette中的调色板组件是这样导出的

export { Palette as default } from "./Palette";

尝试将导入内容更改为此

import { Palette } from 'react-palette';

反应：React-Palette“元素类型无效：应该是字符串，但是得到：对象。”

1 个答案: