관련 게시물을 살펴보고 몇 가지 솔루션을 시도했지만 내 상황에 적응할 수 없었습니다. selectedPin함수를 보내고 자식 구성 요소에서 호출하여 의 상태를 변경하려고합니다 .
내 코드 아래 참조
상위 구성 요소 :
export default function Pins(data) {
const chargers = data.data;
const [selectedPin, setSelectedPin] = useState(null);
const handleClose = () => {
setSelectedPin(null);
};
return (
<>
{chargers.map((charger, index) => (
<Marker
key={index}
longitude={charger.AddressInfo.Longitude}
latitude={charger.AddressInfo.Latitude}
>
<Button
onClick={(e) => {
e.preventDefault();
setSelectedPin(charger);
}}
>
<img src="./assets/pin.svg" alt="marker pin" />
</Button>
</Marker>
))}
{selectedPin ? (
<PopupInfo selectedPin={selectedPin} handleClose={handleClose} />
) : null}
</>
);
}
하위 구성 요소 :
export default function PopupInfo(selectedPin, { handleClose }) {
const pin = selectedPin.selectedPin;
console.log(pin);
console.log(handleClose);
return (
<Popup
latitude={pin.AddressInfo.Latitude}
longitude={pin.AddressInfo.Longitude}
onClose={handleClose}
>
<div>Popup Info</div>
</Popup>
);
}
handleClose자식 구성 요소에 콘솔 로그인하면 undefined.
둘 다 명명 된 소품으로 전달해야한다고 생각합니다.
export default function PopupInfo({ selectedPin, handleClose })
또는 다음을 수행하십시오.
export default function PopupInfo(props)그런 다음 props.selectedPin및 props.handleClose.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다