react prop으로 배열값 넘기기

Question

다음과 같이 하위 컴포넌트에 props을 넘겨셀렉트 박스를 생성하려고 합니다.//에러 const HotelOfferSelectBox = (props : any) => { { { return( <> {labelName} ) } export default SelectBoxComponent;하지만 세번째 변수 optionValues 가 선언이 안되었다고 나오는데요.배열값을 prop으로 넘기는 방법좀 알려주시면 감사하겠습니다.(+) prop의 두번째 인자 onChangeFunc 의 타입을 어떻게 설정해야 할지 모르겠습니다. ( ) => void 인지요?

songline · Accepted Answer

const optionValues = [1,2,3,4,5,6]; const HotelOfferSelectBox = (props : any) => { 이런식으로 하시면 됩니다. 2번째 코드에서 optionValue 라고 오타가 나있었네요.추가로 onChange 에 할당할 콜백 함수는 이벤트 객체를 인자로 받을 수 있으나, 굳이 필요치 않으면 생략할 수 있습니다. ts 스타일로 표현하면 (event?: React.ChangeEvent) => void 입니다.

레모네이드 · Answer

제가 다시 오타 여부를 확인해 봤는데, 오타는 아닌것 같고 destructuring 관한 문제인 것 같습니다.저번에 답변 주신 대로 다음을import { Label, Select} from "./commonStyle"; const SelectBoxComponent = ({labelName} : any, {onChangeFunc} : any , {optionValues} : any) => { return( <> {labelName} ) } export default SelectBoxComponent;타입과 함께 적용한 후 destructuring 하니까import { Label, Select} from "./commonStyle"; const SelectBoxComponent = (props : {labelName : string, onChangeFunc : (event?: React.ChangeEvent) => void, optionValues : string[]}) => { const {labelName, onChangeFunc, optionValues} = props; return( <> {labelName} ) } export default SelectBoxComponent;잘 실행됩니다. 항상 감사드립니다.

react prop으로 배열값 넘기기

2개의 답변

Q&A 목록