React 是一個用於構建用戶界面的 JavaScript 庫，它可以讓開發者快速構建功能強大的應用程序。React 的一個重要特性是它可以讓開發者在組件之間傳遞資料，這樣可以讓開發者更容易地構建應用程序。在本文中，我們將詳細介紹 React 組件父子之間傳遞資料的方法。
React 組件父子之間傳遞資料
React 的組件可以分為兩種：父組件和子組件。父組件是一個容器，它可以包含多個子組件，而子組件則是父組件的一部分。父組件可以將資料傳遞給子組件，而子組件也可以將資料傳遞給父組件。
要將資料傳遞給子組件，可以使用 React 的 props 特性。props 是一個物件，它可以將資料傳遞給子組件。例如，如果要將一個字串傳遞給子組件，可以使用以下代碼：
<ParentComponent>
<ChildComponent message="Hello World!" />
</ParentComponent>
在上面的代碼中，我們將一個字串傳遞給子組件，子組件可以使用 props 來獲取該字串：
class ChildComponent extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}
另一方面，子組件也可以將資料傳遞給父組件。要做到這一點，可以使用 React 的回調函數，回調函數可以在子組件中調用，並將資料傳遞給父組件。例如，如果要將一個字串傳遞給父組件，可以使用以下代碼：
<ParentComponent onMessageReceived={this.handleMessageReceived}>
<ChildComponent />
</ParentComponent>
在上面的代碼中，我們將一個回調函數傳遞給父組件，子組件可以調用該函數，並將資料傳遞給父組件：
class ChildComponent extends React.Component {
handleClick() {
this.props.onMessageReceived('Hello World!');
}
render() {
return <button onClick={this.handleClick}>Send Message</button>;
}
}
總結來說，React 的組件可以通過 props 和回調函數來傳遞資料，這樣可以讓開發者更容易地構建應用程序。
推薦閱讀文章
How to Pass Data Between React Components
Pass Data Between React Components
How to Pass Props to a React Component
Passing Props to React Components
Passing Data Between React Components<br/