Nic Lin's Blog

喜歡在地上滾的工程師

[React] Class Component 傳遞 props 的 2 種方式

當 React 元件是一個 class component 時,被呼叫誕生的第一個方法會呼叫 constructor,如果是 functional component 是不會有這個方法的。

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }
}

這邊可以直接塞 props 傳進來的值

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: props.initialCounterValue,
    };
  }
}

如果只是為了單純要設定 state 的話,不一定要用 constructor ,只要 Babel 有設定 class fields 就可以用更簡單的方法撰寫

class MyComponent extends Component {
  state = {
    counter: 0,
  };
}

一樣也可以塞 props

class MyComponent extends Component {
  state = {
    counter: this.props.initialCounterValue,
  };
}
comments powered by Disqus