読者です 読者をやめる 読者になる 読者になる

【React入門】 3 prop概要

この記事では以下の画面を作成する。

f:id:kosumoro:20160805201832j:plain

https://cosmology233.github.io/sandbox/hatena/2016/08/05/

index.html

こちらと同じ。

kosumemo.hatenablog.com

scripts/script.js

class MyApp extends React.Component {
  render() {
    return (
      <div>
        <MyAppHeader appName="My App" />
        
        <h1>Hello world!</h1>
      </div>
    );
  }
};

class MyAppHeader extends React.Component {
  render() {
    return (
      <header>
        <h1>This is {this.props.appName}ʼs Header!</h1>
      </header>
    );
  }
};

ReactDOM.render(
  <MyApp />,
  document.getElementById("app")
);

propコンポーネントに渡すことができる変数のようなもの。

MyApp クラスの render 部分に注目すると、 MyAppHeader コンポーネントを使用する際に appName="My App" という記述があるのがわかる。

これは、 My App という文字列を MyAppHeader コンポーネントに渡しているということである。

次に、 MyAppHeader クラスの render 部分に注目すると、 {this.props.appName} という部分がある。この部分は描画される際、渡された値で置き換えられ、 This is My Appʼs Header! となる。