css - 使用示例作为指南渲染布局

问题描述

我有这个呈现菜单的组件：

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import Intro from './Intro'
import Houses from './Houses'
import PortfolioPage from './PortfolioPage'
import Cronology from './Cronology'

var data = require('./db.json');

class PortfolioMenu extends Component {
  constructor(props) {
    super(props)
    this.state = {
      portfolioClass: "",
      interiors: [],
      furnitures: [],
      studies: [],
      houses: []
    }
  }

  componentDidMount() {
    this.setState({
      interiors: data.interiors[0],
      furnitures: data.furnitures[0],
      studies: data.studies[0],
      houses: data.houses
    })
  }        
  render() {      
    return (
      <div>
        <Router>
          <div class="wrapper2">
            <div class="wrapper-portfolio">
              <Route exact path='/portfolio' render={() => <Intro />} />
              <Route exact path='/portfolio/casas' render={() => <Houses data={this.state.houses}/>} />
              <Route exact path='/portfolio/interiores' render={() => <PortfolioPage data={this.state.interiors}/>} />
              <Route exact path='/portfolio/moveis' render={() => <PortfolioPage data={this.state.furnitures}/>} />
              <Route exact path='/portfolio/estudos' render={() => <PortfolioPage data={this.state.studies}/>} />
              <Route exact path='/portfolio/cronologia' render={() => <Cronology />} />
            </div>
            <nav>
              <ul className={`portfolio-menu ${portfolioClass}`}>
                <li><NavLink activeClassName="active" isActive={this.isActive} exact to="/portfolio">• introdução</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/casas">• casas</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/interiores">• interiores</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/moveis">• móveis</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/estudos">• estudos</NavLink></li>
                <li><NavLink activeClassName="active" exact to="/portfolio/cronologia">• cronologia</NavLink></li>
              </ul>
            </nav>           
          </div>
        </Router>
      </div>
    )
  }
}


export default PortfolioMenu

我想做<li>如下的例子：

我该如何解决？我想以这个例子中显示的这种精确方式进行渲染。做这个 li 元素的分布。我想在第一行做四个块，在第二行做两个。

标签： cssreactjs

如果您必须使用纯 CSS（正如您在上面的评论中提到的），您将需要使用CSS 网格。

如果您愿意使用第三方 JavaScript 库，我建议您研究Material-UI。特别是他们的Grid组件。

您的问题使您看起来对前端开发比较陌生，所以我推荐第二种方法。Material-UI 包括许多在多个浏览器中经过良好测试的常用组件。这是创建一个不错的布局和设计的好方法，而不会让人头疼。

css - 使用示例作为指南渲染布局

问题描述

解决方案

推荐阅读