正在回答
5回答
同学你好,
是写了哪个页面后出现错误的呢,建议将页面的代码粘贴上来,老师帮助你测试下,便于准确定位问题所在。
祝学习愉快!
好帮手慕星星
2019-09-18 15:12:53
你好,
代码中缺少半个花括号:

添加上就可以了。下次同学粘贴的时候可以选择一下格式哦,例如:

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { Menu, Icon } from 'antd';
import axios from 'axios';
import logo from './logo.png';
import './style.css';
class AppHeader extends Component {
constructor(props) {
super(props);
this.state = { list: [] }
}
//循环遍历list里面的数据,生成6个Menu.Item组件
// 这里缺少半个花括号
getMenuItems() {
console.log(this.state.list);
return this.state.list.map(item => {
return (<Menu.Item key={item.id}>
{/* 这里需要多理解 */}
<Link to={`/${item.id}`}>
<Icon type={item.icon} />{item.title}
</Link>
</Menu.Item>)
})
}
componentDidMount() {
axios.get('http://www.dell-lee.com/react/api/header.json')
.then(res => {
this.setState({
list: res.data.data
})
})
}
render() {
return (
<Fragment>
<img src={logo} className='app-header-logo' />
<Menu mode="horizontal" className='app-header-menu'>
{this.getMenuItems()}
</Menu>
</Fragment>
)
}
}
export default AppHeader;自己测试下,祝学习愉快!
TimSpan
2019-09-18 14:56:25
import React, { Component, Fragment } from 'react';
import {Link} from 'react-router-dom';
import { Menu, Icon } from 'antd';
import axios from 'axios';
import logo from './logo.png';
import './style.css';
class AppHeader extends Component {
constructor(props) {
super(props);
this.state = {
list: []
}
}
//循环遍历list里面的数据,生成6个Menu.Item组件
getMenuItems() {
console.log(this.state.list);
return this.state.list.map(item => {
return (
<Menu.Item key={item.id}>
{/* 这里需要多理解 */}
<Link to={`/${item.id}`}>
<Icon type={item.icon} />{item.title}
</Link>
</Menu.Item>
)
})
}
componentDidMount(){
axios.get('http://www.dell-lee.com/react/api/header.json')
.then(res => {
this.setState({
list: res.data.data
})
})
}
render() {
return (
<Fragment>
<img src={logo} className='app-header-logo' />
<Menu
mode="horizontal" className='app-header-menu'
>
{this.getMenuItems()}
</Menu>
</Fragment>
)
}
}
export default AppHeader;import React, { Component } from 'react';
import axios from 'axios';
import { List } from 'antd';
class PageList extends Component {
componentWillReceiveProps(nextProps){
console.log(nextProps);
}
constructor(props){
super(props);
this.state = {
data: []
}
}
render() {
return (
<List
style={{background:'#fff'}}
bordered
dataSource={this.state.data}
renderItem={item => (
<List.Item>
{item.title}
</List.Item>
)}
/>
)
}
// 这里需要多理解
componentDidMount(){
const id = this.props.match.params.id;
axios.get('http://www.dell-lee.com/react/api/list.json?id=' + id)
.then(res => {
this.setState({
data: res.data.data
});
})
}
}
export default PageList;import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Layout } from 'antd';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import AppHeader from './components/Header/';
import List from './containers/List/';
import Detail from './containers/Detail/';
import 'antd/dist/antd.css';
import './style.css';
const { Header, Footer, Content } = Layout;
class App extends Component {
render() {
return (
<BrowserRouter>
<Layout style={{ minWidth: 1300, height: '100%' }}>
<Header className='header'>
<AppHeader />
</Header>
<Content className='content'>
<Switch>
<Route path='/detail' component={Detail} />
<Route path='/:id' component={List} />
</Switch>
</Content>
<Footer className='footer'>@copyright TimSpan 2019</Footer>
</Layout>
</BrowserRouter >
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程


恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星