react --props
props============================================
//伝達値
components======================================
//メリット=>使いやすい
*常に大文字で構成部品名の最初の文字を作成
分割構成部品=============================
//伝達値
<script type="text/babel">
function Welcome(props){
// name="algml"를 props인자를 통해 받음
return(
<p>hello {props.name}</p>
)
}
ReactDOM.render(
<Welcome name="algml"/>,
// props를 통해 name="algml"를 Welcome(props)로 전달
document.querySelector('#root')
)
</script>
[出力]components======================================
//メリット=>使いやすい
*常に大文字で構成部品名の最初の文字を作成
<script type="text/babel">
function Welcome(props){
return(
<>
<p>hello, {props.name}</p>
</>
)
}
function App(){
return(
<>
<Welcome name="mihee"/>
<Welcome name="algml"/>
<Welcome name="womaixin"/>
</>
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
[出力]分割構成部品=============================
// 나누기 전의 코드 => 재사용 어려움
<script type="text/babel">
function Comment(props){
return(
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo=name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
)
}
</script>
// 각각의 컴포넌트로 나눈 후 => 재사용에 더욱 용이
<script type="text/babel">
function Avatar(props){
return(
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
)
}
function UserInfo(props){
return(
<div className="UserInfo">
<Avatar user={props.user}/>
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
)
}
function Comment(props){
return(
<div className="Comment">
<UserInfo user={props.author}/>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
)
}
</script>
Reference
この問題について(react --props), 我々は、より多くの情報をここで見つけました https://velog.io/@algml/react-props-1iu53sc0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol