我正在尝试 link 其他组件作为下拉列表 react-router-dom 问题中的选项

Question

check this image> 大家好，我正在尝试使用 optionsBar 和 optionsPie 作为我的 header-list 项目中的下拉选项，就像我在 home 中使用其他链接一样 和 关于我们

大家好我想在我的 header-list 项目中使用 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> 个标签。

我正在尝试 link 其他组件作为下拉列表 react-router-dom 问题中的选项

I'm trying to link other components as options in my dropdowns react-router-dom issue

javascript

components

reactjs

dropdown

react-router-dom