为什么我定义了root的样式之后layout内部的标签就会跑出来？

首页课程实战体系课手记专栏慕课教程

来源：4-1 使用动态路由获取不同列表内容（1）

yinikko

2020-03-18 23:38:02

body {

height: 100%;

background: #f0f2f5;

}

.header {

border-bottom: 1px solid rgb(185, 184, 184);

background: white;

}

.content {

min-height: 650px;

margin: 10px;

}

.footer {

padding: 12px 50px !important;

text-align: center;

border-top:1px solid rgb(187, 187, 187);

}

index.js

import React, {Component} from 'react';

import ReactDom from 'react-dom';

import { BrowserRouter, Route, Switch } from 'react-router-dom'

import { Layout } from 'antd';

import 'antd/dist/antd.css';

import './style.css';

import AppHeader from './components/Header/index';

import List from './itemPages/list';

import Details from './itemPages/details';

const { Header, Footer, Content } = Layout;

class App extends Component {

render() {

return (

</Header>

</Switch>

</BrowserRouter>

</Content>

<Footer className='footer'>Footer</Footer>

</Layout>

)

}

ReactDom.render(<App />, document.getElementById('root'));

将高度设置成100%之后，layout标签本身高度会和页面等高，但是header，content，footer三个组件会像左浮动一样跑到外面去

写回答

2回答

好帮手慕星星

2020-03-20

同学你好，测试之后仍然是报错的，无法还原效果。老师已经在私信中进行了回复，可以查看一下哦。

祝学习愉快！

好帮手慕星星

2020-03-19

同学你好，粘贴的index.js代码无法进行测试，因为文件中的list和details组件中与课程中写的不一致，有报错。建议将这两部分代码全部粘贴上来，老师帮助测试下。

祝学习愉快！

hinikko

h details/index.js import React, {Component} from 'react'; class Details extends Component { render() { return ( <div> Details </div> ) } } export default Details; list/index.js import React, {Component} from 'react'; import { List } from 'antd'; import axios from 'axios'; import './style.css'; class PageList extends Component { constructor(props) { super(props); this.state = { data: [] } } render() { return ( <div className='page-list'> <List bordered dataSource={this.state.data} renderItem={item => <List.Item>{item.title}</List.Item>} /> </div> ) } componentDidMount() { axios.get('http://www.dell-lee.com/react/api/list.json') .then((res) => { this.setState({ data:res.data.data }) }) } } export default PageList;

h020-03-19

共1条回复

0 学习 · 10739 问题

查看课程

相似问题

给img设置浮动怎么没出现父元素的高度塌陷情况呢？

回答 3

为什么这样不行？

回答 4

如何将item.type的字符串转为html标签

回答 2

项目打包后进入到路由页面再刷新页面就找不到了

回答 6

将字符串转为html标签-续

回答 1

打开慕课网App查看更多内容