如何在 react.js 中创建 3 列布局结构

Question

我已经开始学习关于React js. 现在我正在构建一个博客页面，理想情况下是使用React.js. 有没有一种有效的方法来创建一个简单的 3 列布局，我可以style在其中设置列。在components文件夹下创建了一个App.js文件并使用Blog.js、BlogItem.js创建了文件，但是如何在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.jsimport 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}/>    ));  }}// PropTypesBlog.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>        )    }}// PropTypesBlogItem.prototypes ={    blog: PropTypes.object.isRequired}const blogStyle ={    backgroundColor: '#c7c6c1'}export default BlogItem// 目前的输出：

Answer 1

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"))

Answer 2

您可以为此使用引导程序，您只需要使用 className 而不是 class。我认为这就是您导入 Bootstrap 后的目标。

https://getbootstrap.com/docs/4.3/layout/grid/ [1]

或者你可以使用 CSS 网格系统

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout [1]