React-Router 链接整个（内联）块，而不仅仅是文本？

Question

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

如下所示，您可以单击Services 文本 来激活服务路由，但如果您单击About 块而不是块本身的文本, 它会将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 添加到<a> 的CSS 中，应该足够简单以使用CSS 进行修复。

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

导航仅在您单击文本时发生，因为只有文本是由<Link> 呈现的<a> 标记的一部分。

默认情况下，<a> 是内联渲染的（请参阅下面 sn-p 中 <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; 添加到锚元素的 CSS 并将填充从列表元素移动到锚时，您会看到它扩展为占据整个 <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>

Answer 2

我不知道整个容器标签，但您只需将padding: relative 添加到您应用的文本或文本中即可...