codestates / codestates/Campbu

[Err Log] typescript 자식 타입 지정 /2022-01-06

Open
#93 0 comments 0 reactions 0 assignees View on GitHub
Err Log
Dominant language
TypeScript
Stars
0
Forks
3
PR merge metrics
No merged PRs in 30d

Description

# 어떤 에러인가요?
- 버튼 컴포넌트를 다른 컴포넌트에서 import 해와 쓰는데 태그 안에 이미지 앨리먼트를 넣으니 에러가 났다.
- 자식으로 들어오는 앨리먼트를 타입으로 지정해주지 않아 발생한 에러였다.
```tsx

logo
logo

```
# 에러 메시지

# 에러 핸들링 방법
- 따라서 자식 컴포넌트의 타입을 `React.ReactNode`로 지정해주어 props로 넘겨주었다.
```tsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { rem } from '../common';

interface Props {
text?: string;
width: string;
height: string;
background: string;
...
**children?: React.ReactNode;**
}

export const Button = (props: Props) => {
const {
text,
width,
height,
background,
...
**children,**
} = props;
return (

{text}
**{children}**

);
};
```
# [에러 핸들링을 위해 참고한 레퍼런스 링크](https://velog.io/@velopert/create-typescript-react-component)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.