并排放置两个视图

Question

我创建了一个 Web 应用程序，该应用程序显示侧边菜单栏并呈现如下图表：- 我希望两个组件（侧边栏菜单和图表）并排放置。目前，图表是在侧边栏菜单之后呈现的，即图表在其下方呈现。是否可以并排渲染它们？

import React, { Component } from "react";
import { useState, useEffect } from "react";
import { FaBeer } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import "./styles.css";
import { Chart } from "chart.js";
import moment from "moment";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.levelsArr = [
      "Jan",
      "Feb",
      "Mar",
      "April",
      "May",
      "June",
      "July",
      "Aug"
    ];
    this.chartData = {
      dataSet1: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590) + 10
      ),
      dataSet2: Array.from(
        { length: 8 },
        () => Math.floor(Math.random() * 590) + 10
      )
    };
    this.state = {
      months: [
        { month: "Jan", value: "0" },
        { month: "Feb", value: "1" },
        { month: "Mar", value: "2" },
        { month: "Apr", value: "3" },
        { month: "May", value: "4" },
        { month: "Jun", value: "5" },
        { month: "Jul", value: "6" },
        { month: "Aug", value: "7" }
      ],
      from: "0",
      toMonth: "7",
      filterLimit: 100,
      sidebarOpen: true,
      sidebar: false
    };
    this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
    this.sidebar = this.showSidebar.bind(this);
  }
  onSetSidebarOpen(open) {
    this.setState({ sidebarOpen: open });
  }
  showSidebar(sidebar) {
    this.setState({sidebar: !sidebar});
  }
  componentDidMount() {
    this.barChart = new Chart("bar", {
      type: "bar",
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Student Admission Data"
        }
      },
      data: {
        labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July", "Aug"],
        datasets: [
          {
            type: "bar",
            label: "School 1",
            data: this.chartData.dataSet1,
            backgroundColor: "rgba(20,200,10,0.4)",
            borderColor: "rgba(20,200,10,0.4)",
            fill: false
          },
          {
            type: "bar",
            label: "School 2",
            data: this.chartData.dataSet2,
            backgroundColor: "rgba(100,189,200,0.4)",
            borderColor: "rgba(100,189,200,0.4)",
            fill: false
          }
        ]
      }
    });
  }
  applyFilter() {
    //console.log(this.chartData.dataSet1);
    const value = this.state.filterLimit;
    const lessThanOrGreaterThan = this.state.lessThanOrGreaterThan;
    console.log(lessThanOrGreaterThan);
    this.barChart.data.datasets[0].data = this.chartData.dataSet1;
    this.barChart.data.datasets[1].data = this.chartData.dataSet2;

    this.barChart.data.datasets.forEach((data, i) => {
      if (lessThanOrGreaterThan === "greaterThan") {
        this.barChart.data.datasets[i].data = data.data.map((v) => {
          if (v >= value) return v;
          else return 0;
        });
        // console.log(">>>>>>>>", this.barChart.data.datasets[i].data);
      } else {
        this.barChart.data.datasets[i].data = data.data.map((v) => {
          if (v <= value) return v;
          else return 0;
        });
        //console.log("?????????", this.barChart.data.datasets[i].data);
      }
    });
    this.barChart.update();
  }
  applyDateFilter() {
    this.barChart.data.labels = this.levelsArr.slice(
      parseInt(this.state.from),
      parseInt(this.state.toMonth) + 1
    );
    this.barChart.update();
  }

  render() {
    return (
      <div class="chart-diplay">
        <div>
          <React.StrictMode>
          <div class="divSideBar">
          <ProSidebar >
          <Menu iconShape="square">
            <MenuItem>
            <select
            id="lessThanOrGreaterThan"
            value={this.state.lessThanOrGreaterThan}
            onChange={(e) =>
              this.setState({ lessThanOrGreaterThan: e.currentTarget.value })
            }
          >
            <option value="lessThan">Less Than</option>
            <option value="greaterThan">Greater Than</option>
          </select>
            </MenuItem>
            <MenuItem>
            <input
            id="filterLimit"
            placeholder="Filter Limit"
            value={this.state.filterLimit}
            onChange={(e) => this.setState({ filterLimit: e.target.value })}
          ></input>
            </MenuItem>
            <MenuItem>
            <button class="button" onClick={() => this.applyFilter()}>
            Apply Filter
          </button>
            </MenuItem>
              <MenuItem>
              <div>
            <select
              id="from"
              value={this.state.from}
              onChange={(e) => this.setState({ from: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
            &nbsp;&nbsp;
            <select
              id="toMonth"
              value={this.state.toMonth}
              onChange={(e) => this.setState({ toMonth: e.target.value })}
            >
              {this.state.months.map((el) => (
                <option value={el.value} key={el}>
                  {" "}
                  {el.month}{" "}
                </option>
              ))}
            </select>
          </div>
            </MenuItem>
          <MenuItem>
          <button class="button" onClick={() => this.applyDateFilter()}>
            Date Filter
          </button>
          </MenuItem>
          </Menu>
        </ProSidebar>
        </div>
        <div class="divBar">
        <canvas id="bar"></canvas>
        </div>
        </React.StrictMode>
        </div>
      </div>
    );
  }
} 

我希望过滤器即使在编辑应用后仍能正常工作。

Answer 1

你可以做到

<div className = 'container'>
       <SideBar/>
       <chart/>
</div>

在你的 css 文件中：

.container {
            display:flex;
            flex-direction: row or column 
}