學習如何在React中利用父子組件傳遞資料

React 是一個由 Facebook 所開發的 JavaScript 函式庫，可以讓開發者建立互動式的網頁應用程式。React 的特色在於它可以讓開發者將網頁應用程式分割成一個個獨立的組件，並且可以讓父組件與子組件之間傳遞資料。

在 React 中，父組件可以透過 props 將資料傳遞給子組件，而子組件則可以透過 state 來儲存資料。父組件可以透過 setState() 方法來更新子組件的資料，而子組件則可以透過 props 來接收父組件傳遞的資料。

// 父組件
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Hello World'
    };
  }
  render() {
    return (
      
    );
  }
}

// 子組件
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }
  render() {
    return (
      
{this.state.data}
    );
  }
}

上面的程式碼示範了父組件如何將資料傳遞給子組件，以及子組件如何接收父組件傳遞的資料。在這個範例中，父組件將字串 'Hello World' 傳遞給子組件，子組件則將該字串儲存在 state 中，並將其顯示出來。

React 的組件父子之間傳遞資料的功能可以讓開發者更容易地將網頁應用程式分割成一個個獨立的組件，並且可以讓父組件與子組件之間傳遞資料。這樣可以讓開發者更容易地開發出大型的網頁應用程式，並且可以更有效率地管理程式碼。