如標題所說，在很多情況下，props裡面的參數都會有空值的問題，而props如果沒特別去設定的話，他回傳的值就是空值，這時候就會有需求，會需要設定預設值。

以前一章的實例來寫

 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 (
        <React.StrictMode>
              <span>{this.props.text1}</span>
              <span>{this.props.text2}</span>
              <span>{this.props.text3}</span>
        </React.StrictMode>      
      )
  }
}


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

這邊改了一些，用<React.StrictMode>來當Hi的最外層，這樣HTML看起來比較乾淨，用DIV也可以不影響的。
我將

<App2  text="你好 React" text1="text1" text2="text2" text3="text3"/>
改成
<App2  text="你好 React"/>

輸出畫面

設定預設值有2種方式
方法一 寫在組件裡面

class Hi extends Component {

    static defaultProps = {
        text1: '你沒參數1',
        text2: '你沒參數2',
        text3: '你沒參數3',
      }

  render() {

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

  }
}

方法二 也可以寫在組件外面

class Hi extends Component {
  render() {

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

  }
}

Hi.defaultProps = {
    text1: '你沒參數1',
    text2: '你沒參數2',
    text3: '你沒參數3',
  };

2個都一樣依需求使用