在反應中導入后，使用粗箭頭聲明的功能組件變為未定義

Question

我在 react 中聲明了這個功能組件，但是當我在另一個組件中導入這個組件時，它拋出一個錯誤，指出這個組件是未定義的，當我將這個胖箭頭功能更改為正常的 ES5 function 時，它有效嗎？ 為什么？？？

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

Answer 1

嘗試使用const單獨定義，然后將創建的ActionButton變量導出為：

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

export default ActionButton

然后您可以導入其他組件 - 可能路徑不同：

import ActionButton from './ActionButton'

Answer 2

您不能像這樣導出默認值：

export default ActionButton = (props) => {

你應該這樣做：

export default (props) => {

這是因為默認導出沒有明確的名稱。 也就是說，您可以使用任何名稱導入它。

---

但是，首選方法是先定義然后再導出：（如果您還有其他命名的導出）

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