如何在 React 中的页面之间重用 const 对象？

Question

我正在使用下面的这个片段来翻译我的网站内容。但是，有一种方法可以避免在页面之间复制和粘贴此代码吗？

import SampleSection from "../section/sample"
import { useRouter } from 'next/router'
import en from '../locales/en'
import pt from '../locales/pt'

export default function Home() {

    const router = useRouter()
    const { locale } = router
    const t = locale === 'en' ? en : pt

    const changeLanguage = (e) => {
       const locale = e.target.value;
       router.push({ pathname, query }, asPath, { locale: locale })
    }

    return (
        <>
            <SampleSection
                title={t.home.title}
            />
        </>

    )
}

Answer 1

这是创建您自己的挂钩的好机会。基本上只是提取您需要 re-use 的逻辑，将其粘贴到一个函数中并将其导出。然后，您可以根据需要在任意多个组件中调用它作为挂钩。

可以在此处找到有关创建自己的挂钩的更多信息https://reactjs.org/docs/hooks-custom.html。

Answer 2

作为 Justin Formentin 所说的补充，您需要将钩子命名为 useABC，其中 ABC 是您要使用的名称。

如何在 React 中的页面之间重用 const 对象？

How to reuse a const object between pages in React?

javascript

internationalization

reactjs

next.js

chakra-ui