state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什麽有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。

（1）使用Props屬性

class Mainextends React.Component {
  render() {
    return (
      <div>
        <Name name={‘yulingjia‘} />
      </div>
    );
  }
}

class Name extends React.Component {
  render() {
    
 
return (
      <h1>{this.props.name}</h1>
    );
  }
}

（2）默認Props

class Mainextends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Main.defaultProps = {
  name: ‘Yulingjia‘
};

（3）State 和 Props

class Main React.Component {
  constructor() {
      super();
      
 
this.state = {
        name: "Yulingjia"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
      </div>
    );
  }
}
 
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}

（3）Props 驗證

Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。
當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。

var name= "Yulingjia";

class Name extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
Name.propTypes = {
  name: PropTypes.string
};

ReactDOM.render(
    <Name name={name} />,
    document.getElementById(‘example‘)
);

React（六）Props屬性