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>注册click事件。但是，如果将填充移动到<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;添加到锚元素的CSS并将填充从list元素移动到锚点时，您会看到它展开以占用整个<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就可以做到这一点。

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

2 个答案: