素子-反応日1


構成部品とは
サイトの画面の各要素は似ていて、よく繰り返し使用されています.構成部品は、MVCビューとは独立して再使用することも、構成部品を使用して簡単に新しい構成部品を作成することもできます.
単純構成部品の作成
1.TodaysPlan構成部品の作成
// myreact/do-it-example-lav/src/04/TodaysPlan.jsx
import React from 'react';

class TodaysPlan extends React.Component {
  render() {
    return (
     <div className="message-container">
       놀러가자
     </div>
    );
  }
}

export default TodaysPlan;
2.App構成部品にTodaysPlan構成部品を追加する
// myreact/do-it-example-lav/src/App.js
import React from 'react';
// 작성된 컴포넌트 추가
import TodaysPlan from './03/TodaysPlan';

class App extends React.Component {
  render() {
    return (
      <div className="body">
        <TodaysPlan />
      </div>
    );
  }
}

export default App;
3.TodaysPlan結果構成部品の出力

構成部品アセンブリ
データコンポーネントフィーチャーはproperty親コンポーネントからサブコンポーネントの読取り専用データステータス構成部品に渡されるステータスで、データコンテキストの親コンポーネントでそのステータスを作成して変更し、すべてのサブコンポーネントにデータを渡すことができます.