Я пытаюсь связать другие компоненты, как варианты в моих выпадающих выпусках реагировать-маршрутизатор-дом

Question

проверьте это изображение > Привет всем, я пытаюсь использовать optionsBar & optionsPie в качестве параметров раскрывающегося списка в моем элементе списка заголовков, так же, как я использую другие ссылки для home и о нас

Привет всем, я пытаюсь использовать optionsBar и optionsPie в качестве параметров раскрывающегося списка в моем элементе списка заголовков, так же, как я использую другие ссылки для home и о нас

    import React, {Component} from 'react'
    import { Link } from 'react-router-dom'
    import { Dropdown, Menu, Icon} from `semantic-ui-react`;


    const optionsBar = [
      {as: Link, content: 'Rank ', to: '/barT', key: 'Rank'},
      {as: Link, content: 'Category', to: '/barK', key: 'Category'},
    ]

    const optionsPie = [
      {as: Link, content: 'Rank ', to: '/pieT', key: 'Rank'},
      {as: Link, content: 'Category', to: '/pieK', key: 'Category'},
    ]



      class Header extends Component{

          render(){
            return (
           <header>
              <nav className="navbar navbar-inverse">
            <div className="container-fluid">
              <div className="navbar-header">
                <a className="navbar-brand" href="/">Relation document </a>
              </div>
              <ul className="nav navbar-nav "> 
              <li><Link to='/'>Home</Link></li>
              <li><Link to='/page1'>ABout Us</Link></li>
              <li><Link to='/page2'>Info</Link></li>

              <li class="nav-item dropdown">
                <a class="nav dropdown">
                  <Dropdown  header=`Select Rank or Category` options={optionsBar} defaultValue={optionsBar[0].value}  text='Bar' />  
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav dropdown">
                  <Dropdown  header='Select Rank or Category' options={optionsPie} defaultValue={optionsPie[0].value}  text='Pie' />  
                </a>
              </li>
              </ul>
            </div>
              </nav>
            </header>

            )
          }
    }

    export default Header

Answer 1

error: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

Вы получаете эту ошибку, потому что у вас есть два тега <a>, вложенных друг в друга, например,

<a><a>...</a></a>

Я считаю, что этопроисходит здесь:

<a class="nav dropdown">
  <Dropdown options={optionsBar} .../>  
</a>

Элементы Dropdown визуализируются как Link компоненты (см. optionsBar), а поскольку Link в конечном итоге становится тегом <a>, вы получаете вложенный <a>теги.