反应：反应调色板"Element type is invalid: expected a string but got: object."

Question

我正在尝试使用反应调色板从图像中获取主色。但是，我似乎无法让它工作，因为我要么遇到阻止我的页面正确加载的错误，要么它根本不起作用。

最初我认为问题出在冲突上，所以我尝试在 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，很可能是因为代码不起作用。

编辑：我的完整应用程序.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';