我在1个父级组件中有2个同级组件。就像这样:
import React, { useState } from 'react';
import PlaceSearchInput from './PlaceSearchInput';
import { GoogleMap, withGoogleMap } from "react-google-maps";
export default function Search(props) {
const [mapCenter, setMapCenter] = useState({lat:3, lng:2});
function Map() {
return (
<div>
<GoogleMap defaultZoom={10} center={mapCenter}/>
</div>
)
}
const WrappedMap = withGoogleMap(Map);
if (!props.isGoogleMapApiReady)
return (
<div>Loading...</div>
)
return (
<div style={{ margin: "100px" }}>
<div style={{ height: "50vh", width: "50vh" }}>
<WrappedMap
loadingElement={<div style={{ height: "100%" }} />}
containerElement={<div id="map" style={{ height: "100%" }} />}
mapElement={<div style={{ height: "100%" }} />}
/>
<PlaceSearchInput setMapCenter={setMapCenter} />
</div>
</div>
)
}
我希望输入设置坐标,而Map显示坐标。我知道一种方法是在父级中具有坐标状态,然后将set函数传递给Input,将坐标传递给Map。但是通过这种方法,我可以在Input组件更改状态时发现它,尽管Map确实移到了新坐标,但是Map刷新了,这就是我要避免的事情。有办法解决吗?
答案 0 :(得分:2)
尝试一下,我将Map和WrappedMap的创建移出了Search组件。 我相信,每次重新渲染组件时,组件定义的更改都可能引起人们的反应,以为它是一个全新的组件,请卸载旧的并安装新的组件,而不是重新渲染。
filterForElement