Inflearn コミュニティ Q&A

grs0412

投稿した質問数

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

共通コンポーネント - Button 作成

styled component 버튼 타입에러

解決済みの質問

作成

487

編集済み

import { ReactNode } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

interface ButtonProps {
  children?: ReactNode;
  onClick: (e: any) => void;
  type?: "link" | "button";
  url?: string;
}

const StyledButton = styled.button<ButtonProps>`
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
`;

function Button({ children, onClick, type = "button", url }: ButtonProps) {
  const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>;

  const RealLink = (
    <StyledButton onClick={() => {}}>
      <Link to={url!}>{children}</Link>
    </StyledButton>
  );
  return <div></div>;
}

export default Button;

강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니

button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요

reactnode.jsmongodbexpresstypescript

回答 1

donghunee

インストラクター

grs0412님 질문 남겨주셔서 감사합니다:)

해당 onClick을 required하게 설정을 해놔서 생기는 타입 에러인 것 같습니다.

interface ButtonProps { 
 children?: ReactNode; 
 onClick?: (e: any) => void; 
 type?: "link" | "button"; 
 url?: string; 
}

다음과 같이 onClick 메소드를 optional하게 받아주시기 바랍니다.

다시한번 질문 남겨주셔서 감사합니다.

grs0412

投稿した質問数

質問する