Блог

Я все еще изучаю JavaScript, React и GatsbyJS.

Мне сложно перенастроить список (выпадающий ( ul > li > input label > ul > li ), копирующий исходные коды @Smakosh, gatsby-starter-i18n/src/components/theme/Header/SelectLanguage.jsx который является options selection ( select > option ) из-за value={lang} onChange={e => selectLanguage(e.target.value)} того, что в списке нет. Я хотел использовать data-aria , но я не использую Bootstrap и jQuery.

• Исходные коды gatsby-starter-i18n/src/components/theme/Header/SelectLanguage.jsx :

   const SelectLanguage = ({ selectLanguage, lang }) => (
    <select value={lang} onChange={e => selectLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
      <option value="ar">عربي</option>
      <option value="pt">Português</option>
    </select>
  )
    

  Я попытался перенастроить его в список (выпадающий) на основе https://codepen.io/Tont/pen/hdsev:

   const SelectLanguage = ({ selectLanguage, lang }) => (
    <li>
        <Input id="languages" type="checkbox" name="menu" href={lang} onChange={e => selectLanguage(e.target.value)}/>
        <Label for="languages">Languages</Label>
        <Submenu className="submenu">
          <li><a href="en">English</a></li>
          <li><a href="es">Español</a></li>
        </Submenu>
    </li>
  
  )
    

• Исходные коды gatsby-starter-i18n/blob/master/src/components/theme/Header/index.jsx :

   const Header = () => (
    <Context.Consumer>
        {({ toggleLanguage, lang }) => (
            <StyledHeader>
                <Navbar as={Container}>
                    <Links>
              {/* ... */}
                        <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
                    </Links>
                </Navbar>
            </StyledHeader>
        )}
    </Context.Consumer>
  )
    

  Я изменил коды на основе этого пера:

   const Header = () => (
    <Context.Consumer>
      {({ toggleLanguage, lang }) => (
        <StyledHeader>
          <Navegador id="menu">
            <li>
              <Links>
                {/* ... */}
                <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
              </Links>
            </li>
          </Navegador>
        </StyledHeader>
      )}
    </Context.Consumer>
  )
    

Источник

• @Smakosh Gatsby Starer i18n
  • theme/Header/SelectLanguage.jsx
  • theme/Header/index.jsx
• Чистый CSS, нажмите выпадающее меню

Я никогда раньше не работал с Gatsby или recompose, поэтому сомневаюсь, что смогу сильно помочь, но я попробую и дам вам знать, в чем, по моему мнению, может быть проблема в любом случае:

Из того, что я вижу, значение введенных языков отправляется при каждом нажатии на него, но я не вижу, чтобы это значение обновлялось с выбранным языком при каждом нажатии на элементы списка, поэтому я бы подошел к этому так

 const SelectLanguage = ({ selectLanguage, lang }) => (
  <li>
      <Input id="languages" type="checkbox" name="menu" />
      <Label for="languages">Languages</Label>
      <Submenu className="submenu">
        <li onClick={e => selectLanguage("en")} ><a href="en">English</a></li>
        <li onClick={e => selectLanguage("es")}><a href="es">Español</a></li>
      </Submenu>
  </li>

)