ReactJS导航项，不包装在工具栏组件中

Question

我开始在我的react项目中制作一个导航栏（到目前为止，没有路由），并且我无法将NavigationItems包装到导航栏，现在它们是垂直对齐的。

我进行了结构设计，以便有一个名为NavigationItem的组件，该组件保存导航栏中每个项目的属性。

import React from 'react';

import './NavigationItem.css'

const navigationItem = (props) =>(
        <li className="NavigationItem">
            <a 
            className={props.active ? "active" : null}
            href={props.link}> 
            {props.children} 
            </a>
        </li>
);

export default navigationItem;

我添加了一些CSS样式，以使其与我的工具栏组件对齐，该组件是页面上每个视图的整个标题。

    .NavigationItem{
    margin: 0;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    align-items: center;
}

.NavigationItem a {
    color: rgb(207, 182, 182);
    text-decoration: none;
    height: 100%;
    padding: 16px 10px;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    display: block;
}

.NavigationItem a:hover, 
.NavigationItem a:active,
.NavigationItem a.active{
    background-color: rgb(126, 49, 49);
    border-bottom: 4px solid lightblue;

}

这是我添加的CSS，应该对其进行包装，并且我添加了一个活动类，以便用户可以看到当前页面，它们处于打开状态。

然后，我将所有项目包装在NavigationItems组件中：

   const navigationItems = () =>{
    return(
        <ul className="NavigationItems">
           <nav>
           <NavigationItem link="/" active>Burger Builder</NavigationItem>
           <NavigationItem link="/" >Checkout</NavigationItem>
           </nav>
        </ul>
    )
}

我在这里还添加了一些CSS：

.NavigationItems{
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
height: 100%;
}

但是，我的项目在垂直对齐时没有正确对齐，我附上了一张图片，以查看其外观，每个活动类在组件上都能正常工作，我只是无法包装元素。 / p>

Answer 1

您应该从ul元素内部删除nav标签。现在，在创建li元素之前，您需要在ul内部创建一个导航。您的li元素应该是ul的直接子代。

所以类似这样的结构：

<nav>
<ul class="NavigationItems">
    <li class="NavigationItem">
        <a class="active" href="{props.link}">Burger Builder</a>
    </li>
    <li class="NavigationItem">
        <a href="{props.link}">Checkout</a>
    </li>
</ul>
</nav>