[React] Component & Props

ソース:https://ko.reactjs.org/docs/components-and-props.html

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を処理するときに純粋な関数のように動作する必要があります.