[react]propsの使用
この文章はMZ's Develogに移った。
💡 中に入る。
ベロフトとのモダン反応のpropsで値を構成部品に渡すを読んでまとめた文章
propsの定義とdefaultPropsとprops.児童応用コードについてまとめた.
📝 propsの概念
propertiesの略.
任意の値を構成部品に渡す必要がある場合はpropsを使用します.
🎯 デフォルトはdefaultProps
構成部品にpropsが指定されていない場合にデフォルトで使用する値を設定できます.
🔎 Hello.js Code
colorとname propsのコード例を使用します.
Hello.defaultProps名前のpropsのデフォルト値を「名前なし」に設定します.import React from 'react';
function Hello({ color, name }) {
return <div style={{ color }}>{name}님 안녕하세요</div>
}
Hello.defaultProps = {
name: '이름 없음'
}
export default Hello;
🔎 App.js Code
最初のHelloエレメントにはnameとcolorの値が設定されています.
2番目のHelloエレメントにはcolor値のみが設定されています.import React from 'react';
import Hello from './Hello';
function App() {
return (
<>
<Hello name="React" color="blue" />
<Hello color="green" />
</>
);
}
export default App;
💻 実行結果
最初のHello構成部品は、自分で設定した「React」name props値です.
2番目のHello構成部品は、DefaultPropsによって設定された「名前なし」を決定します.
......
新しい号では、記事のすべてを表示できます。
Reference
この問題について([react]propsの使用), 我々は、より多くの情報をここで見つけました
https://velog.io/@mnz/React-props-활용하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
ベロフトとのモダン反応のpropsで値を構成部品に渡すを読んでまとめた文章
propsの定義とdefaultPropsとprops.児童応用コードについてまとめた.
📝 propsの概念
propertiesの略.
任意の値を構成部品に渡す必要がある場合はpropsを使用します.
🎯 デフォルトはdefaultProps
構成部品にpropsが指定されていない場合にデフォルトで使用する値を設定できます.
🔎 Hello.js Code
colorとname propsのコード例を使用します.
Hello.defaultProps名前のpropsのデフォルト値を「名前なし」に設定します.
import React from 'react';
function Hello({ color, name }) {
return <div style={{ color }}>{name}님 안녕하세요</div>
}
Hello.defaultProps = {
name: '이름 없음'
}
export default Hello;
🔎 App.js Code
最初のHelloエレメントにはnameとcolorの値が設定されています.
2番目のHelloエレメントにはcolor値のみが設定されています.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<>
<Hello name="React" color="blue" />
<Hello color="green" />
</>
);
}
export default App;
💻 実行結果
最初のHello構成部品は、自分で設定した「React」name props値です.
2番目のHello構成部品は、DefaultPropsによって設定された「名前なし」を決定します.
......
新しい号では、記事のすべてを表示できます。
Reference
この問題について([react]propsの使用), 我々は、より多くの情報をここで見つけました
https://velog.io/@mnz/React-props-활용하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([react]propsの使用), 我々は、より多くの情報をここで見つけました https://velog.io/@mnz/React-props-활용하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol