Props[2]—新規コンテンツ
7360 ワード
この間道具を使っていたとき、親から子に伝えたと思っていた結果、親の重みが子->孫に伝わることを改めて認識しました.
理解を容易にするためには,さらなる学習が必要であるが,propsのデータ値をこのように伝達することができる.
[부모 컨포넌트]
function Monsters() {
const [npcMeta, setNpcMeta] = useState([]);
useEffect(() => {
fetch('데이터 주소', {
method: 'GET'
})
.then(response => response.json())
.then(data => setNpcMeta(data))
},[])
return (
<div className="npc">
<CardList npcMeta={npcMeta} />
</div>
);
npcMetaという名前のデータは、<CardList npcMeta={npcMeta} />
の対応するコードによってサブエレメントに渡され、{npcMeta}stateの値が渡される.[자식 컨포넌트]
function CardList(props) {
return
<div className="cardList">
<Card
key={list.id}
id={list.id}
name={list.name}
email={list.email}
userName={list.username}
/>
</div>
}
props
に伝達されたnpcMeta
値はcard[子孫]素子に伝達される過程でnpcmetaの각 데이터의 id, name, email, username
値に伝達される.[자손 컨포넌트]
function Card({name, email, userName}) {
return (
<div className="cardContainer">
<h2>{name}</h2>
<p>{email}</p>
<p>{userName}</p>
</div>
)
}
子孫大会から受け取ったprops의 name, email, userName
の値は再転送され、h 2ラベルと2つのpラベルに割り当てられて使用される.理解を容易にするためには,さらなる学習が必要であるが,propsのデータ値をこのように伝達することができる.
Reference
この問題について(Props[2]—新規コンテンツ), 我々は、より多くの情報をここで見つけました https://velog.io/@sad_wf/Props-2-새로-알게된-내용テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol