如何在 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.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

// 目前的输出：

Answer 1

const Columns = () =>&nbsp;&nbsp; <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridGap: 20 }}>&nbsp; &nbsp; <div>Column 1</div>&nbsp; &nbsp; <div>Column 2</div>&nbsp; &nbsp; <div>Column 3</div>&nbsp; </div>ReactDOM.render(<Columns />, document.getElementById("root"))

Answer 2

您可以为此使用引导程序，您只需要使用 className 而不是 class。我认为这就是您导入 Bootstrap 后的目标。https://getbootstrap.com/docs/4.3/layout/grid/&nbsp;[1]或者你可以使用 CSS 网格系统https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout&nbsp;[1]