props是react裡面很重要的參數，但使用起來就是變數，JSX裡的變數

官方文件寫

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

此 function 是一個符合規範的 React component，因為它接受一個「props」（指屬性 properties）物件並回傳一個 React element。我們稱之為 function component，因為它本身就是一個 JavaScript function。

我自己是好像懂又好像不....，不過直接寫的實例比較快

App.js

import React, { Component } from 'react'
import './App.css';
import logo from './logo.svg';


class App2 extends Component {

  render() {

      return (
          <div>
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  {this.props.text}
              </p>
          </div>
      )

  }
}



export default class App extends Component {
    render() {
        return (
          <div className="App">
          <header className="App-header">
            <App2  text="你好 React"/>
          </header>
        </div>
        )
    }
}

然後再寫一個

class App2 extends Component {

  render() {

      return (
          <div>
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  {this.props.text}
              </p>
          </div>
      )

  }
}

class Hi extends Component {

  render() {

      return (
              <span>
                  {this.props.text}  {this.props.text2} {this.props.text3}
              </span>
      )

  }
}


export default class App extends Component {
    render() {
        return (
          <div className="App">
          <header className="App-header">
            <App2  text="你好 React"/>
            <Hi  text="1" />
            <Hi  text="4" text2="5"/>
            <Hi  text="7" text2="8" text3="9"/>
          </header>
        </div>
        )
    }
}

實例三

class App2 extends Component {

  render() {

      return (
          <div>
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                  {this.props.text}<br />
                  <Hi  text1={this.props.text1} text2={this.props.text2} text3={this.props.text3} />

              </p>
          </div>
      )

  }
}

class Hi extends Component {

  render() {

      return (
              <span>
                  {this.props.text1}  {this.props.text2} {this.props.text3}
              </span>
      )

  }
}


export default class App extends Component {
    render() {
        return (
          <div className="App">
          <header className="App-header">
            <App2  text="你好 React" text1="text1" text2="text2" text3="text3"/>
          </header>
        </div>
        )
    }
}