如何在react.js中创建3列布局结构
如何在react.js中创建3列布局结构
提问于 2019-10-08 06:37:31
我已经开始学习React js了。现在，我正在使用React.js构建一个博客页面，最好是一个3栏的布局。有没有一种有效的方法来创建一个简单的3列布局，在那里我可以style列。创建了一个App.js文件，并使用Blog.js，BlogItem.js在components文件夹下创建了文件，但是如何在React.js中传递3列结构布局？请指教
// App.js：
import React, {Component}from 'react';
import Blog from './components/Blog'
import './App.css';
class App extends Component {
state={
blogs:[
{
id: 1,
title:'Javascript blog',
completed: false
},
{
id: 2,
title:'Cypress blog',
completed: false
},
{
id: 3,
title:'Testing blog',
completed: false
},
{
id: 4,
title:'Java multi threading blog',
completed: false
},
{
id: 5,
title:'Puppeteer blog',
completed: false
},
{
id: 6,
title:'React Examples',
completed: false
}
]
}
render(){
console.log(this.state.blogs)
return (
<div className="App">
<Blog blogs={this.state.blogs}/>
</div>
);
}
}
export default App;//Blog.js
import React, {Component}from 'react';
import BlogItem from './BlogItem';
import PropTypes from 'prop-types';
class Blog extends Component {
render(){
return this.props.blogs.map((blog)=>(
<BlogItem key={blog.id} blog={blog}/>
));
}
}
// PropTypes
Blog.propTypes={
blog: PropTypes.array.isRequired
}
export default Blog;//BlogItem.js：
import React, { Component } from 'react'
import PropTypes from 'prop-types';
export class BlogItem extends Component {
render() {
return (
<div style={blogStyle}>
<p>{this.props.blog.title}</p>
</div>
)
}
}
// PropTypes
BlogItem.prototypes ={
blog: PropTypes.object.isRequired
}
const blogStyle ={
backgroundColor: '#c7c6c1'
}
export default BlogItem//截止目前的输出：
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-08 07:00:06
const Columns = () =>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridGap: 20 }}>
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
ReactDOM.render(<Columns />, document.getElementById("root"))Stack Overflow用户
发布于 2019-10-08 06:54:01
你可以使用bootstrap来完成这个任务，你只需要使用className而不是类。我认为这就是你导入Bootstrap后的目标。
https://getbootstrap.com/docs/4.3/layout/grid/ 1
或者你可以使用CSS网格系统
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout 1
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58277981
复制相关文章
相似问题
腾讯云开发者
