12. props

egoing · Apr 13, 2019 · 0bc7e65 · 0bc7e65
1 parent f79a6a9
commit 0bc7e65
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,7 @@
 import React, { Component } from 'react';
 import './App.css';
 
-class Subject extends Component {
-  render(){
-    return (
-      <header>
-          <h1>WEB</h1>
-          world wide web!
-      </header>  
-    );
-  }
-}
+
 
 class TOC extends Component{
   render(){
@@ -30,20 +21,31 @@ class Content extends Component{
   render(){
     return (
       <article>
-          <h2>HTML</h2>
-          HTML is HyperText Markup Language.
+          <h2>{this.props.title}</h2>
+          {this.props.desc}
       </article>
     );
   }
 }
 
+class Subject extends Component {
+  render(){
+    return (
+      <header>
+          <h1>{this.props.title}</h1>
+          {this.props.sub}
+      </header>  
+    );
+  }
+}
+
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <Subject></Subject>
+        <Subject title="WEB" sub="world wide web!"></Subject>
         <TOC></TOC>
-        <Content></Content>
+        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
       </div>
     );
   }