如何在用户使用搜索之前隐藏这些元素

Question

有一个Main组件，它有4个独立的组件。在用户不使用搜索之前，这些组件必须不可见。

第一个组件负责显示天气图，第二个组件用于显示地图。我不知道如何具体隐藏这两个组件。

第一组分1

import React, { useContext, useState, useEffect } from 'react';
import Chart from 'react-apexcharts';
import { Context } from '../../contex';
import './weather-graph.scss';
import { useTranslation } from 'react-i18next';
const WeatherGrapth = () => {
const { t } = useTranslation()
const {dailyForecast} = useContext(Context);
const [category, setCategory] = useState([])
const [data, setData] = useState([])
useEffect(() => {
const day = [];
const temp =[];
dailyForecast.forEach((d) => {
const unixTimestamp = d.dt;
const getTemp = Math.round(d.temp.day)
let getDay = new Date(unixTimestamp * 1000).getDate();
day.push(getDay)
temp.push(getTemp)
})
setCategory(day)
setData(temp)
}, [dailyForecast]); 
return(
<>
{dailyForecast.temp && 
<div className="graph__container">
<h3 className="graph__title">{t("weekly_foreacst")}</h3>
<Chart options={{
chart: {
id: 'weather-graph'
},
xaxis: {
categories: category, 
title: {
text:  [t("date")],
},
},
yaxis: {
title: {
text:  [t("temperature")],
},
},
}} 
series={[{
name: 'temp',
data: data
}]} type="line" height={'349px'} />
</div>
}

</>
)
}
export default WeatherGrapth;

第二组分2

import React, { useEffect }  from 'react';
import './weather-map.scss';
import {API_KEY} from './../../apis/config';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-openweathermap/leaflet-openweathermap.css';
import 'leaflet-openweathermap';
import { useTranslation } from 'react-i18next';
const WeatherMap = () => {
const { t } = useTranslation();
useEffect(() => {
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: 'copyright <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' });

const clouds = L.OWM.clouds({showLegend: false, opacity: 0.5, appId: `${API_KEY}`});
const cloudscls = L.OWM.cloudsClassic({showLegend: false,appId: `${API_KEY}`});
const precipitation = L.OWM.precipitation({showLegend: false, appId: `${API_KEY}`});
const precipitationcls = L.OWM.precipitationClassic({showLegend: false,appId: `${API_KEY}`});
const rain = L.OWM.rain({showLegend: false,appId: `${API_KEY}`});
const raincls = L.OWM.rainClassic({showLegend: false,appId: `${API_KEY}`});
const snow = L.OWM.snow({showLegend: false,appId: `${API_KEY}`});
const pressure = L.OWM.pressure({showLegend: false,appId: `${API_KEY}`});
const pressurecntr = L.OWM.pressureContour({showLegend: false,appId: `${API_KEY}`});
const temp = L.OWM.temperature({showLegend: false,appId: `${API_KEY}`});
const wind = L.OWM.wind({showLegend: false,appId: `${API_KEY}`});
const map = L.map('map', { center: new L.LatLng(53.9,  27.5667), zoom: 5, layers: [osm] });
const baseMaps = { "OSM Standard": osm };
const overlayMaps = {
[t("clouds")]: clouds,
[t('cloudscls')]: cloudscls,
[t('precipitation')]: precipitation,
[t('precipitationcls')]: precipitationcls,
[t('rain')]: rain,
[t('raincls')]: raincls,
[t('snow')]: snow,
[t('pressure')]: pressure,
[t('pressurecntr')]: pressurecntr,
[t('temp')]: temp,
[t('wind')]: wind,
};
const layerControl = L.control.layers(baseMaps, overlayMaps,{collapsed:window.innerWidth < 768}).addTo(map);
}, []);

return(
<div className="weathermap-container"> 
<div id="map" style={{height: '260pt', borderRadius:'20px'}} className="map-weather"></div>
</div> 
)
}
export default WeatherMap;

Answer 1

您可以通过传递一个道具来实现这一点例如

return (
<>
<div className="main-container">
{prop.visible ? 

<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
: ""
}
</div>
<div className="pr">weather app</div>
</>
)
}
export default Main;```

So to make it visible  just pass in 
```visible={true} ```
when calling the function