javascript - React 无法识别 DOM 元素上的 `activeKey` 属性
问题描述
首先:我知道已经有几个关于这个错误的问题,但他们有不同的来源(我认为)。这是我的代码:
<BrowserRouter>
<React.Fragment>
<Navbar className='navbar_all'>
<Navbar.Header>
<Navbar.Brand>
<Link className='navbar_brand' id='home' to='/'>
<img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/>
</Link>
</Navbar.Brand>
</Navbar.Header>
<Nav className='float_right'>
<Link to='/homepage' style={{textDecoration: 'none'}}>
{/*^^^^^^^^^^^^ This line throws an error*/}
<button style={{
backgroundColor: '#F16049',
border: '4px solid #F16049',
borderRadius: '4px',
padding: '10px',
marginBottom: '5px',
color: '#fff'
}}>
DLA ROZWIĄZUJĄCYCH
</button>
</Link>
</Nav>
</Navbar>
</React.Fragment>
</BrowserRouter>
我得到的错误是:
警告:React 无法识别
activeKey
DOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中,请将其拼写为小写字母activekey
。如果您不小心从父组件传递了它,请将其从 DOM 元素中移除。
问题是,我相信嵌套,但我不知道这里有什么问题。
有任何想法吗?
解决方案
问题是您不应将 DOM 元素直接嵌套在Nav
组件下,而应使用NavItem
. 这种方法的问题在于NavItem
,anchor
嵌套Link
在它下面会引发另一个错误,因为Link
它也是一个锚。
解决方案是这样使用LinkContainer
。react-router-bootstrap
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Nav, NavItem, Navbar } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
const app = (
<BrowserRouter>
<Navbar>
<Nav>
<LinkContainer to="/somewhere">
<NavItem>somewhere</NavItem>
</LinkContainer>
</Nav>
</Navbar>
</BrowserRouter>
);
ReactDOM.render(app, document.getElementById('root'));