由于无法在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 。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）