[React] Component & Props
ソース:https://ko.reactjs.org/docs/components-and-props.html
構成部品の名前は常に大文字で始まる.
日本の道具author.AvatarUrlの道具が現れたかどうかauthor.名前が出てきましたか...
関数コンポーネントとクラスコンポーネントは、独自のpropsを変更できません.
すべてのReactコンポーネントは、自分のpropsを処理するときに純粋な関数のように動作する必要があります.
function Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
データのある「props」オブジェクトパラメータを受信し、React Elementを返します.そのため、それは有効です.JS関数なので関数素子と呼ばれています.注意事項
構成部品の名前は常に大文字で始まる.
構成部品の抽出
function formatDate(date) {
return date.toLocaleDateString();
}
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>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'https://placekitten.com/g/64/64',
},
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}
/>,
document.getElementById('root')
);
コンポーネントはネストされた構造であるため、変更は難しいかもしれませんが、注釈セクションをよく見ている著者は簡単に見つけることができます.日本の道具author.AvatarUrlの道具が現れたかどうかauthor.名前が出てきましたか...
propsは読み取り専用です
関数コンポーネントとクラスコンポーネントは、独自のpropsを変更できません.
すべてのReactコンポーネントは、自分のpropsを処理するときに純粋な関数のように動作する必要があります.
Reference
この問題について([React] Component & Props), 我々は、より多くの情報をここで見つけました https://velog.io/@cptkuk91/React1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol