我有这样的问题。我正在申请React。在那里我写了这样的溃败。
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Signup from './components/Signup';
import Officerreg from './components/Officerreg';
import OffenceAdd from './components/OffenceAdd';
import Dofine from './components/Dofine';
import Payfine from './components/Payfine';
import Drivers from './components/Drivers';
import DriversShow from './components/DriversShow';
ReactDOM.render(<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/signup" component={Signup} />
<Route path="/addofficer" component={Officerreg}/>
<Route path="/addoffence" component={OffenceAdd}/>
<Route path="/dofine" component={Dofine}/>
<Route path="/payfine" component={Payfine}/>
<Route path="/drivers" component={Drivers}/>
<Route path="/drivershow/:address" component={DriversShow}/>
</div>
</Router>, document.getElementById('root'));
registerServiceWorker();
我已经在我的Header.js文件中使用了这些路由。
import React,{ Component } from 'react';
import { Menu } from 'semantic-ui-react';
import { Link } from "react-router-dom";
// import App from '../App';
//
// import './Header.scss';
import web3 from '../ethereum/web3';
import trafficfine from '../ethereum/trafficfine';
import factory from '../ethereum/factory';
export default class Header extends Component {
state = {
activeItem: '',
Officer: false,
driver: false
}
async componentDidMount(){
const accounts = await web3.eth.getAccounts();
const isofficer = await trafficfine.methods.checkOfficer(accounts[0]).call();
const isdriver = await factory.methods.checkDriver(accounts[0]).call();
this.setState({Officer:isofficer,driver:isdriver});
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render(){
const { activeItem,Officer,driver } = this.state;
let show;
return(
<Menu style={{ color:'#ffffff',height:'60px'}}>
<Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
<img src="../favicon.png" style={{maxHeight:'500px'}} alt="logo"></img>
</Menu.Item>
<Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick}>
<Link to="/">Home</Link>
</Menu.Item>
<Menu.Item name='addofficer' active={activeItem === 'addofficer'} onClick={this.handleItemClick}>
<Link to="/addofficer">Add Officer</Link>
</Menu.Item>
<Menu.Item name='addoffence' active={activeItem === 'addoffence'} onClick={this.handleItemClick}>
<Link to="/addoffence">Add Offence</Link>
</Menu.Item>
<Menu.Item name='dofine' active={activeItem === 'dofine'} onClick={this.handleItemClick} >
<Link to="/dofine">Do Fine</Link>
</Menu.Item>
<Menu.Item name='payfine' active={activeItem === 'payfine'} onClick={this.handleItemClick} >
<Link to="/payfine">Pay Fine</Link>
</Menu.Item>
<Menu.Item name='drivers' active={activeItem === 'drivers'} onClick={this.handleItemClick} >
<Link to="/drivers">Drivers</Link>
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
<Link to="/signup">Sign Up</Link>
</Menu.Item>
</Menu.Menu>
</Menu>
);
}
};
我在App.js文件中使用了这样的标头。
import React, { Component } from 'react';
import './App.css';
import Layout from './components/Layout';
import Header from './components/Header';
import trafficfine from './ethereum/trafficfine';
import { Card, Grid} from 'semantic-ui-react';
// import web3 from './ethereum/web3';
class App extends Component {
state={
numberofDrivers: '',
numberofOfficers: '',
numberofOffencers: '',
fineAmmount: 0
}
async componentDidMount(){
// const accounts = await web3.eth.getAccounts();
const summury = await trafficfine.methods.getSummary().call();
this.setState({numberofDrivers:summury[0],numberofOfficers:summury[1],numberofOffencers:summury[2],fineAmmount:summury[3]});
}
render() {
const{
numberofDrivers,
numberofOffencers,
numberofOfficers,
fineAmmount
}=this.state;
return (
<div className="App">
<Header></Header>
<Layout>
<Grid>
<Grid.Row>
<Grid.Column width={2}></Grid.Column>
<Grid.Column width={12}>
<Grid.Row>
<Card.Group>
<Card style={{background:'#B2EBF2',width:'400px'}}>
<Card.Header>
<Grid>
<Grid.Column width={12}>
<h2 style={{paddingTop:'20px'}}>Number Of Drivers</h2>
</Grid.Column>
<Grid.Row>
<Grid.Column width={8}>
<img src="./driver.png" alt="driver" style={{maxHeight:'100px'}}></img>
</Grid.Column>
<Grid.Column width={4}>
<h2>{numberofDrivers}</h2>
</Grid.Column>
</Grid.Row>
</Grid>
</Card.Header>
<Card.Content>
<Card.Description>
This number of drivers priviladged to use app
</Card.Description>
</Card.Content>
</Card>
<Card style={{background:'#00BCD4',width:'400px'}}>
<Card.Header>
<Grid>
<Grid.Column width={12}>
<h2 style={{paddingTop:'20px'}}>Number Of Officers</h2>
</Grid.Column>
<Grid.Row>
<Grid.Column width={8}>
<img src="./officer.png" alt="driver" style={{maxHeight:'100px'}}></img>
</Grid.Column>
<Grid.Column width={4}>
<h2>{numberofOfficers}</h2>
</Grid.Column>
</Grid.Row>
</Grid>
</Card.Header>
<Card.Content>
<Card.Description>
This is number of Officers authorized to take action
</Card.Description>
</Card.Content>
</Card>
<Card style={{background:'#D1C4E9',width:'400px'}}>
<Card.Header>
<Grid>
<Grid.Column width={14}>
<h2 style={{paddingTop:'20px'}}>Number Of Offencers</h2>
</Grid.Column>
<Grid.Row>
<Grid.Column width={8}>
<img src="./offence.png" alt="driver" style={{maxHeight:'100px'}}></img>
</Grid.Column>
<Grid.Column width={4}>
<h2>{numberofOffencers}</h2>
</Grid.Column>
</Grid.Row>
</Grid>
</Card.Header>
<Card.Content>
<Card.Description>
This Number of offences have been powered
</Card.Description>
</Card.Content>
</Card>
<Card style={{background:'#FFCDD2',width:'400px'}}>
<Card.Header>
<Grid>
<Grid.Column width={12}>
<h2 style={{paddingTop:'20px'}}>Fine Ammount </h2>
</Grid.Column>
<Grid.Row>
<Grid.Column width={8}>
<img src="./fine.png" alt="driver" style={{maxHeight:'100px'}}></img>
</Grid.Column>
<Grid.Column width={4}>
<h2>{fineAmmount}</h2>
</Grid.Column>
</Grid.Row>
</Grid>
</Card.Header>
<Card.Content>
<Card.Description>
This is the Total fine amount
</Card.Description>
</Card.Content>
</Card>
</Card.Group>
</Grid.Row>
</Grid.Column>
</Grid.Row>
</Grid>
</Layout>
</div>
);
}
}
export default App;
当我通过菜单进行路由时，它会在控制台上给我并发出警告。
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
in a (created by Link)
in Link (at Header.js:61)
in a (created by MenuItem)
in MenuItem (at Header.js:60)
in div (created by Menu)
in Menu (at Header.js:35)
in Header (at Dofine.js:54)
in div (at Dofine.js:53)
in Unknown (created by SideEffect(Component))
in SideEffect(Component) (at Dofine.js:52)
in Dofine (created by Route)
in Route (at src/index.js:24)
in div (at src/index.js:19)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:18)
我进行了大量搜索以找到解决此问题的方法，但我无法解决他们的任何问题。如果有人可以帮助我找到解决此问题的方法，将不胜感激。谢谢！
答案 0 :(得分：1)
这不是错误，而是警告。发生这种情况是因为您试图从Link的{{1}}中的React Router渲染一个Menu.Item组件。它们都被编译为DOM中的semantic-ui-react，因此a元素不能是另一个a元素的后代。
在您的a s中尝试一下：
Menu.Item但是，我不确定<Menu.Item
as={Link}
to="/home"
name="home"
active={activeItem === "home"}
onClick={this.handleItemClick}
>
Home
</Menu.Item>
部分，因为您要将菜单项用作链接，所以单击时它应该转到所需的URL。那么，onClick在这种情况下会做什么？
请参见documentation的增强部分。在主页上。