使用胖箭头声明的功能组件在反应中导入后变得未定义答案

【问题标题】：functional component declare using fat arrow becomes undefined after import in react使用胖箭头声明的功能组件在反应中导入后变得未定义
【发布时间】：2023-03-15 11:12:01
【问题描述】：

我在反应中声明了这个功能组件，但是当我在另一个组件中导入这个组件时它会抛出一个错误，这个组件是未定义的，当我将这个 fat arrow 功能更改为正常的 ES5 函数时，它可以工作！为什么？？？

export default ActionButton = (props) => {
    return (
        <div>
            <button>
                <FontAwesomeIcon icon={faPlusSquare} className={classes.ButtonItem} />
            </button>
        </div>
    );
}

【问题讨论】：

你在使用转译器吗？我的猜测是你在这里有一个循环依赖问题，并且正确的函数声明被提升了，但我希望你得到一个临时死区异常而不是 undefined 值。
请注意，您不小心分配了一个ActionButton 变量，如果该变量尚未在其他地方声明，则该变量确实应该在严格模式下引发异常。你真的在做export default (props) => {…}; 或者const ActionButton = (props) => { … }; export default ActionButton; 甚至const ActionButton = (props) => { … }; export {ActionButton as default}？

标签： javascript reactjs ecmascript-6

【解决方案1】：

尝试使用const 单独定义，然后将创建的ActionButton 变量导出为：

const ActionButton = (props) => {
    return (
        <div>
            <button>
                <FontAwesomeIcon icon={faPlusSquare} className={classes.ButtonItem} />
            </button>
        </div>
    );
}

export default ActionButton

然后你可以在其他组件中导入 - 可能路径不同：

import ActionButton from './ActionButton'

【讨论】：

我会用 const 尝试它，但为什么它在没有 const 之前显示 undefined

【解决方案2】：

你不能像这样导出默认值：

export default ActionButton = (props) => {

你应该这样做：

export default (props) => {

这是因为默认导出没有明确的名称。也就是说，您可以使用任何名称导入它。

但是，首选的方法是先定义然后导出：（如果您还有其他命名的导出）

const ActionButton = (props) => {}
export default ActionButton

【讨论】：