react-intl 간단 문법 확인하기

djunnni·2022년 2월 2일
0

FE

목록 보기
3/6
post-custom-banner
// case 1
// 용도 : 단순하게 사용될 경우,
<Button color="link" size="lg" onClick={toggle}>
	<FormattedMessage id="Common.close" defaultMessage="닫기" />
</Button>
      
// case 2
// 용도 : 중간에 요소가 들어가야 할 때,
locale = {
     "Idverification.error": "画像を呼んでくる問題が生じました。{br}再試行してください。" 
}

<FormattedMessage 
	id="Identification.noImage"
	defaultMessage="등록된 이미지가 없습니다."
	
	values={{ br: <br /> }}
/>

<FormattedMessage
    id="PageCountDropdown.item"
    defaultMessage="{number}명씩 보기"
    values={{ number: 4 }}
/>

// case 3
// 용도 : label, input 안에 들어가야 한다거나
<FormattedMessage 
	id="Common.target"
	defaultMessage="대상"
>
	{(text) => <Label>{text}</Label>}
</FormattedMessage>
      
profile
https://djunnni.tistory.com/ 로 이전합니다.
post-custom-banner

0개의 댓글