如何解决由于无法在React
我想在我的GatsbyJS中包含Theme UI的presets，以切换模式（暗和亮）和主题。
我无法修改原始代码的export来将两个const函数合并到export中，因为export需要定义children。我不想使用children，因为JSX中的另一个布局文件已经有children。我也无法将const合并到另一个const中。您将在最后检查错误。最后，我将共享我的仓库的小文件夹供您测试。 In Angular2+ is there any way to extends on inherit const into another const?也无济于事。
请参阅我的小型原始代码，并注意const和export：
import React from 'react'
import {Context} from '../../common'
import SelectLanguage from './SelectLanguage'
import {Links} from './styles'
import {Navegador,StyledHeader} from './styles'
const Header = () => (
<Context.Consumer>
{({ toggleLanguage,lang }) => (
<StyledHeader>
<Navegador id="menu">
<li>
<Links>
{/* ... */}
<SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
</Links>
</li>
</Navegador>
</StyledHeader>
)}
</Context.Consumer>
)
export default Header
还有另一个小的主题UI代码，您会注意到const内的export函数：
/** @jsx jsx */
import { jsx,Styled,useColorMode } from 'theme-ui'
import ButtonUI from '../../theme-ui/button-ui'
const themes = ['deep','funk','future','swiss']
const modes = ['default','dark']
const getThemeName = (theme) =>
{
switch (theme)
{
case 'deep':
return 'Deep'
case 'funk':
return 'Funk'
case 'future':
return 'Future'
case 'swiss':
return 'Swiss'
default:
return theme
}
}
const getModeName = (mode) =>
{
switch (mode)
{
case 'dark':
return (<span role="img" aria-label="moon">? </span>)
case 'default':
return (<span role="img" aria-label="sun">☀️ </span>)
default:
return mode
}
}
export default function Layout({ children })
{
const [theme,setTheme] = useColorMode()
const [mode,setMode] = useColorMode()
const cycleTheme = (e) =>
{
const i = themes.indexOf(theme)
const next = themes[(i + 1) % themes.length]
setTheme(next)
}
const cycleMode = (e) =>
{
const i = modes.indexOf(mode)
const next = modes[(i + 1) % modes.length]
setMode(next)
}
return (
<Styled.root>
<ButtonUI
sx={{
ml: 2,}}
onClick={cycleTheme}>
<span role="img" aria-label="theme">? </span>
{getThemeName(theme)}
</ButtonUI>
<ButtonUI
sx={{
ml: 2,}}
onClick={cycleMode}>
{getModeName(mode)}
</ButtonUI>
</Styled.root>
)
}
让我们将第二个代码合并到第一个代码中，然后将const重命名为function，因为我无法将const放入另一个const或修改{{1 }}（因为需要定义export）
children出现错误：
/** @jsx jsx */
import { jsx,useColorMode } from 'theme-ui'
import {Context} from '../../common'
import SelectLanguage from './SelectLanguage'
import {Links} from './styles'
import {Navegador,StyledHeader} from './styles'
import ButtonUI from '../../theme-ui/button-ui'
const themes = ['deep','dark']
const getThemeName = (theme) =>
{
switch (theme)
{
case 'deep':
return 'Deep'
case 'funk':
return 'Funk'
case 'future':
return 'Future'
case 'swiss':
return 'Swiss'
default:
return theme
}
}
const getModeName = (mode) =>
{
switch (mode)
{
case 'dark':
return (<span role="img" aria-label="moon">? </span>)
case 'default':
return (<span role="img" aria-label="sun">☀️ </span>)
default:
return mode
}
}
const [theme,setTheme] = useColorMode();
const [mode,setMode] = useColorMode();
function cycleTheme (e) {
const i = themes.indexOf(theme)
const next = themes[(i + 1) % themes.length]
setTheme(next)
}
function cycleMode (e) {
const i = modes.indexOf(mode)
const next = modes[(i + 1) % modes.length]
setMode(next)
}
function Header () {
return (
<Styled.root>
<Context.Consumer>
{({ toggleLanguage,lang }) => (
<StyledHeader>
<Navegador id="menu">
<li>
<ButtonUI
sx={{
ml: 2,}}
onClick={cycleTheme}>
<span role="img" aria-label="theme">? </span>
{getThemeName(theme)}
</ButtonUI>
<ButtonUI
sx={{
ml: 2,}}
onClick={cycleMode}>
{getModeName(mode)}
</ButtonUI>
<Links>
<SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
</Links>
</li>
</Navegador>
</StyledHeader>
)}
</Context.Consumer>
</Styled.root>
)
}
export default Header
您可以下载我的仓库的小文件夹：http://sendanywhe.re/HQ19EMJK或https://filetransfer.io/data-package/i03Or3CD或https://fromsmash.com/Gatsby-i81n-Starter。使用Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.
resolveDispatcher
node_modules/react/cjs/react.development.js:1465
useContext
node_modules/react/cjs/react.development.js:1473
patch/React$$1.useContext
node_modules/react-hot-loader/dist/react-hot-loader.development.js:2939
useThemeUI
node_modules/@theme-ui/core/dist/index.esm.js:40
useColorMode
node_modules/@theme-ui/color-modes/dist/index.esm.js:169
./src/components/theme/Header/index.jsx/<
src/components/theme/Header/index.jsx:43
40 | }
41 | }
42 |
> 43 | const [theme,setTheme] = useColorMode();
44 | const [mode,setMode] = useColorMode();
45 |
46 | function cycleTheme (e) {
./src/components/theme/Header/index.jsx
。
解决方法
您可以将所有“布局”功能都放到Header组件中，但是为什么要做所有这些呢？
// Above this is your imports and various constants
function Header () {
const [theme,setTheme] = useColorMode();
const [mode,setMode] = useColorMode();
function cycleTheme (e) {
const i = themes.indexOf(theme)
const next = themes[(i + 1) % themes.length]
setTheme(next)
}
function cycleMode (e) {
const i = modes.indexOf(mode)
const next = modes[(i + 1) % modes.length]
setMode(next)
}
return (
<Styled.root>
<Context.Consumer>
{({ toggleLanguage,lang }) => (
<StyledHeader>
<Navegador id="menu">
<li>
<ButtonUI
sx={{
ml: 2,}}
onClick={cycleTheme}>
<span role="img" aria-label="theme">? </span>
{getThemeName(theme)}
</ButtonUI>
<ButtonUI
sx={{
ml: 2,}}
onClick={cycleMode}>
{getModeName(mode)}
</ButtonUI>
<Links>
<SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
</Links>
</li>
</Navegador>
</StyledHeader>
)}
</Context.Consumer>
</Styled.root>
)
}
export default Header;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。