Reactjs 将常量从React中的功能导出到另一个组件？

我有一个文件ButtonExample.js，我正在从中导出一个组件（ButtonExample）和常量（color）。我正试图将它们导入一个名为CustomCreation.js的文件中。但是，在编译时，我遇到了以下错误：

尝试导入错误：“颜色”不是从“./ButtonExample”导出的

这是ButtonExample.js的代码

import React, { useState } from "react";
import { GithubPicker } from "react-color";

function ButtonExample() {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [color, setColor] = useState("");

  return (
    <div>
      <button
        type="button"
        class="btn btn-dark"
        onClick={() =>
          setShowColorPicker((showColorPicker) => !showColorPicker)
        }
      >
        {showColorPicker ? "Close" : "Choose Color"}
      </button>
      {showColorPicker && (
        <div>
          <GithubPicker
            color={color}
            onChange={(updatedColor) => setColor(updatedColor.hex)}
            colors={[
              "#131313" /*black*/,
              "#575757" /*grey*/,
              "#f6f6f6" /*white*/,
              "#203e20" /*green*/,
              "#423122" /*brown*/,
              "#121c4f" /*navy*/,
            ]}
          />
        </div>
      )}
    </div>
  );
}

export default { ButtonExample, color };

---

我在过去做过这件事，效果很好，所以我不确定我是否遗漏了一些非常明显的东西。

color

被声明为

ButtonTemple（）

函数组件范围内的状态，所以当您尝试在

导出默认值{ButtonTemple，color}内访问它时它总是未定义的

此外，您的导出和导入语法似乎不正确。A为每个模块定义了一个导出，因此您在这里基本上要做的是导出一个由
buttoneg
和一个未定义的变量组成的对象，并尝试使用命名导入和默认导入来导入它们

为了更好地在组件之间共享状态，您应该使用类似Redux的状态管理器来全局管理整个应用程序的状态，或者为该组件和依赖于当前颜色的任何其他组件实现父组件。然后，父组件将管理颜色状态，并将其作为道具传递给需要它的任何其他组件。此外，父组件将需要实现它自己的
setColor
函数，它作为一个道具传递给
ButtonExample
，然后可以替换
GithubPicker的
onChange
回调。
color
被声明为
ButtonExample（）范围内的状态
功能组件，因此当您尝试在
导出默认值{button例如，color}中访问它时它总是未定义的

此外，您的导出和导入语法似乎不正确。A为每个模块定义了一个导出，因此您在这里基本上要做的是导出一个由
buttoneg
和一个未定义的变量组成的对象，并尝试使用命名导入和默认导入来导入它们

为了更好地在组件之间共享状态，您应该使用类似Redux的状态管理器来全局管理整个应用程序的状态，或者为该组件和依赖于当前颜色的任何其他组件实现父组件。然后，父组件将管理颜色状态，并将其作为道具传递给需要它的任何其他组件。此外，父组件需要实现自己的
setColor
函数，它作为一个道具传递给
ButtonExample
，然后可以替换
GithubPicker的
onChange
回调。
一旦颜色变量hook位于ButtonExample函数组件内，这意味着它在它的外部是未定义的。一旦颜色变量hook在Button内部，例如函数组件，这意味着它在它的外部是未定义的。
import ButtonExample, { color } from "./ButtonExample";