reactjs - 水平对齐两个组件

Question

我在使用 React 对齐选项卡中的两个组件时遇到了一些问题。我在 App.js 中的两个组件上有一个 div 包装器。然后我尝试使用 flex 设置组件的样式，但父 div 中似乎没有显示样式。

这是 App.js：

import React, { useState } from 'react';
import './App.css';
import Header from './Components/Header';
import Tabs from './Components/Tabs';
import Footer from './Components/Footer';
import SimpleMap from './Components/SimpleMap';
import NewPatient from './Components/NewPatient';
import Contact from './Components/Contact';
import NewPatientForm from './Components/NewPatientForm';
import Login from './Components/Login';
import MapData from './Components/MapData';


function App() {

  const [buttonPopup,setButtonPopup] = useState(false);
  const [buttonPopupPatient,setButtonPopupPatient] = useState(false);
  const [buttonPopupLogin,setButtonPopupLogin] = useState(false);

  return (
    <div className="App">
      <Header setButtonPopupLogin={setButtonPopupLogin} />
      <Contact trigger={buttonPopup} setTrigger={setButtonPopup} /> 
      <NewPatientForm trigger={buttonPopupPatient} setTrigger={setButtonPopupPatient} />
      <Login trigger={buttonPopupLogin} setTrigger={setButtonPopupLogin} />
     <Tabs> 
       <div label="Home" class="home-page"> 
         <img src="https://news.usc.edu/files/2020/06/covid_vaccine_stock.jpg"></img>
       </div> 
       
       <div label="New Patient"> 
         <NewPatient setButtonPopupPatient={setButtonPopupPatient}/>
       </div> 
       <div label="Locations" className="parent-map"> 
         <SimpleMap />
         <MapData /> 
       </div> 
       <div label="Appointments">
       </div>
     </Tabs> 
     <Footer setButtonPopup={setButtonPopup} />
    </div>
  );
}

export default App;

这是 App.css 文件：

.App {
  text-align: center;
}

.tab-list { border-bottom: 1px solid #ccc;
 padding-left: 0;
 
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
}

.tab-list-active {
  background-color: white;
  border: solid #ccc;
  border-width: 1px 1px 0 1px;
}

img {
  height: 500px;
  width: 500px;
}

.parent-map{
  display: flex;
  flex-direction: row;
}

我尝试将组件包装在一个 div 中并使用相同的 className 来设置样式，我尝试为在 App.js 中包装组件的 div 放置一个 className，但似乎没有任何效果。我在这里错过了什么吗？

这是我要对齐的两个组件：

组件 1：

import React, { useState } from 'react';
import { DropdownButton, Dropdown } from 'react-bootstrap';

function MapData(){


    return (
            <DropdownButton id="dropdown-basic-button" title="Dropdown button">
                <Dropdown.Item href="#/action-1">5 miles</Dropdown.Item>
                <Dropdown.Item href="#/action-2">10 miles</Dropdown.Item>
                <Dropdown.Item href="#/action-3">25 miles</Dropdown.Item>
            </DropdownButton>
    )
}

export default MapData;

组件 2：

import React, {Component} from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
    static defaultProps = {
        center: {
            lat: 33.9806,
            lng: -117.3755
        },
        zoom: 11
    };

    render() {
        return(
            <div style={{ height: '50vh', width: '50%' }} >
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'AIzaSyBcNjjKbKT4Fror-w5C8Ch7GoMaEq_YXAE' }}
                    defaultCenter={this.props.center}
                    defaultZoom={this.props.zoom}
                >
                    <AnyReactComponent
                        lat={33.9806}
                        lng={-117.3755}
                        text="My Marker"
                    />
                    </GoogleMapReact>


            </div>
        )
    }
}

export default SimpleMap;

标签： reactjs