将 const 从 React 中的函数导出到另一个组件中？答案

【问题标题】：Exporting const from a fucntion in React into another component?将 const 从 React 中的函数导出到另一个组件中？
【发布时间】：2020-07-21 02:08:14
【问题描述】：

我有一个文件 ButtonExample.js，我要从中导出一个组件 (ButtonExample) 和 const (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 };

这就是我尝试在 CustomCreation.js 中导入它的方式

import ButtonExample, { color } from "./ButtonExample";

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

【问题讨论】：

一旦颜色变量钩子在 ButtonExample 函数组件内，这意味着它在它之外是未定义的。

标签： reactjs export

【解决方案1】：

color 在ButtonExample() 功能组件范围内被声明为状态，因此当您尝试在export default { ButtonExample, color }; 内访问它时，它始终是未定义的。

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

为了更好地在组件之间共享状态，您应该使用像 Redux 这样的状态管理器在整个应用程序中全局管理状态，或者为此组件实现一个父组件，然后任何其他依赖于当前颜色的组件。然后父组件将管理颜色状态并将其作为道具传递给需要它的任何其他组件。此外，父组件需要实现自己的 setColor 函数，它作为 prop 传递给 ButtonExample，然后可以替换 GithubPicker's onChange 回调。

【讨论】：