css - React-Router 链接整个(内联) block 而不仅仅是文本？

Question

我正在实现一个简单的 React 组件 ( example 2 here: navigation menu )，但添加了 React-Router 以在导航菜单上单击以激活不同的路由。我让它几乎可以正常工作:单击按钮的文本会将您带到不同的路径，但是单击其他地方 inline-block 只会更改样式(激活 class="active") 但不会更改路由(onClick 监听器位于 li 标记上)。

如下所示，您可以单击服务 text 来激活服务路径，但是如果您单击关于 block 而不是 block 本身的文本，它会将 About 注册为事件但不会更改路由。

这是 React 和我的 css 中的相关代码:

导航类扩展 React.Component {

constructor() {
    super()
    this.state = {chosenIndex: 0, tabs: ['Home', 'Services', 'About', 'Contact us']}
    this.selectTab = this.selectTab.bind(this)
}

selectTab(e, i) {
    e.preventDefault()
    this.setState({chosenIndex: i})
}

render() {
        let buttons = this.state.tabs.map((tab, index) => {
            return (
                <li key={index} className={index === this.state.chosenIndex ? 'active' : 'inactive'} onClick={event => this.selectTab(event, index)}><Link to={nameToPath(tab)}>{tab}</Link></li>
            )
        })
        return (
            <BrowserRouter>
                <div>
                    <ul>
                        {buttons}
                    </ul>
                    <Match exactly pattern="/" component={Home} />
              <Match pattern="/services" component={Services} />
              <Match pattern="/about" component={About} />
              <Match pattern="/contactus" component={ContactUs} />
              <Miss component={Home} />
            </div>
            </BrowserRouter>
        )
    }

CSS:

html{
    font:24px normal Arial, sans-serif;
    color:#626771;
    background-color:#fff;
}

body{
    padding:60px;
    text-align: center;
}

ul{
    list-style:none;
    display: inline-block;
}

ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    text-decoration: none;
    color:#7B8585;
    transition:0.3s;
    font: bold 14px Arial;
}

ul li:hover {
    background-color:#beecea;
}

ul li.active {
    background-color:#41c7c2;
}

a {
    text-decoration: none;
    color: #7b8585;
    display: block;
}

ul li.active a {
    color: #fff;
}

p {
    padding-top:15px;
    font-size:16px;
}

Answer 1

应该足够简单，可以通过添加 display: block 来使用 CSS 修复到 <a> 的 CSS .

编辑 <li> 上的填充也应该移动到 <a> . display: block不扩展 <a>到其父级的填充中，因此单击父级的填充将不会向 <a> 注册点击事件。 .如果将填充移动到 <a> ，然而，然后单击填充是单击<a> ，因此导航将按预期进行。

导航仅在您单击文本时发生，因为只有文本是 <a> 的一部分<Link> 渲染的标签.

默认情况下，<a>内联呈现(请参阅下面代码段中 <li> 和 <a> 之间的样式差异)。

li {
  background: red;
  padding: 10px 20px;
  width: 50px;
}

a {
  background: blue;
  color: white;
  text-align: center;
}

<ul>
  <li>
    <a href='#'>Link</a>
  </li>
</ul>

但是，当您添加 display: block;到 anchor 元素的 CSS 并将填充从列表元素移动到 anchor ，您会看到它扩展到占据整个 <li> .

li {
  background: red;
  width: 100px;
}

a {
  background: blue;
  padding: 10px 20px;
  color: white;
  text-align: center;
  display: block;
}

<ul>
  <li>
    <a href='#'>Link</a>
  </li>
</ul>