如何理解react中的super() super(props)

class WebSite extends React.Component {
  constructor() {
      super();

      this.state = {
        name: "菜鳥教程",
        site: "https://www.runoob.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name}/>
        <Link site={this.state.site} />
      </div>
    );
  }
}

class Name extends React.Component {
  constructor(props) {
     super(props)
     console.log(this.props)  // 若是使用super() 這裏輸出undefined
  }
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}> // 使用了super能夠this.props獲取傳入的參數 未使用報錯
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);
</script>

</body>
</html>

　　子類繼承父類的屬性:須要使用super()繼續父類的屬性，同時建立this(子類自己沒有this);

      若是子組件中沒有constructor沒有顯式定義。會默認天機constructor super()

 

 

super(props)的做用就是在父類的構造函數中給props賦值一個對象this.props=props這樣就能在它的下面定義你要用到的屬性了，然而其餘的因爲沒有傳參就直接賦值爲undefind

 

因爲state下面沒有屬性，因此若是隻是定義state就能夠直接super（）