文章目錄

• • React父子組件通信
  • • 認識組件嵌套
    • 組件通信
    • • 父傳子
      • 參數驗證
      • 子傳父

React父子組件通信

認識組件嵌套

組件之間存在嵌套關系：

在之前的案例中，我們只是創建了一個組件App；

如果我們一個應用程序將所有的邏輯都放在一個組件中，那么這個組件就會變成非常的臃腫和難以維護；

所以組件化的核心思想應該是對組件進行拆分，拆分成一個個小的組件；

再將這些組件組合嵌套在一起，最終形成我們的應用程序；

上面的嵌套邏輯如下，它們存在如下關系：

App組件是Header、Main、Footer組件的父組件；

import React, { Component } from 'react'import Header from './Header' import Main from "./Main" import Footer from './Footer'export class App extends Component {render() {return (<div><Header/><Main/><Footer/></div>)} }export default App

Main組件是Banner、ProductList組件的父組件

import React, { Component } from 'react' import Banner from './Banner' import ProductList from './ProductList'export class Main extends Component {render() {return (<div><div>Main</div><Banner/><ProductList/></div>)} }export default Main

組件通信

在開發過程中，我們會經常遇到需要組件之間相互進行通信：

比如App可能使用了多個Header，每個地方的Header展示的內容不同，那么我們就需要使用者傳遞給Header一些數據，讓其進行展示；

又比如我們在Main中一次性請求了Banner數據和ProductList數據，那么就需要傳遞給他們來進行展示；

也可能是子組件中發生了事件，需要由父組件來完成某些操作，那就需要子組件向父組件傳遞事件；

總之，在一個React項目中，組件之間的通信是非常重要的環節；

---

父傳子

父組件在展示子組件時，可能會傳遞一些數據給子組件：

父組件通過 屬性=值的形式來傳遞給子組件數據；

子組件通過 this.props 獲取父組件傳遞過來的數據；

例如我們來看這樣一個需求, 父組件將定義的數組books傳遞給子組件, 由子組件進行展示

將數組傳遞給子組件

export class App extends Component {constructor() {super()this.state = {books: [{name: "算法導論", price: 79},{name: "數據結構", price: 69},{name: "漫畫算法", price: 59},]}}render() {const { books } = this.statereturn (<div>{/* 將數據傳遞給子組件 */}<Header books={books}/></div>)} }

在子組件接受父組件傳遞的數據

export class Header extends Component {render() {// 接受父組件傳遞過來的參數const { books } = this.propsreturn (<div><ul>{books.map(item => {return (<li key={item.name}>名稱: {item.name} 價格: {item.price}</li>)})}</ul></div>)} }

---

參數驗證

對于傳遞給子組件的數據，有時候我們可能希望進行驗證，特別是對于大型項目來說：

當然，如果你項目中默認繼承了Flow或者TypeScript，那么直接就可以進行類型驗證；

但是，即使我們沒有使用Flow或者TypeScript，也可以通過 prop-types 庫來進行參數驗證；

從 React v15.5 開始，React.PropTypes 已移入另一個包中：prop-types 庫

使用方法, 先在子組件中導入PropTypes, 再對傳遞過來的元素添加類型限制即可

import React, { Component } from 'react'// 導入PropTypes import PropTypes from 'prop-types'export class Header extends Component {render() {const { books, name, age } = this.propsreturn (<div><div>名字: {name} 年齡: {age}</div><ul>{books.map(item => {return (<li key={item.name}>名稱: {item.name} 價格: {item.price}</li>)})}</ul></div>)} }// 對參數添加類型的限制 Header.propTypes = {// 表示傳入的類型是要求一個數組, 并且必傳books: PropTypes.array.isRequired,// 傳入類型string, 非必傳name: PropTypes.string,// 傳入類型number, 非必傳age: PropTypes.number }export default Header

更多的驗證方式，可以參考官網：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

比如驗證數組，并且數組中包含哪些元素；

比如驗證對象，并且對象中包含哪些key以及value是什么類型；

比如某個原生是必須的，使用 requiredFunc: PropTypes.func.isRequired

如果沒有傳遞，我們希望有默認值呢？

我們使用defaultProps就可以了

Header.defaultProps = {name: "默認名稱" }

---

子傳父

某些情況，我們也需要子組件向父組件傳遞消息：

在vue中是通過自定義事件來完成的；

在React中同樣是通過props傳遞消息，只是讓父組件給子組件傳遞一個回調函數，在子組件中調用這個函數即可；

我們這里來完成一個案例：

將計數器案例進行拆解；

將按鈕封裝到子組件中：CounterButton；

CounterButton發生點擊事件，將內容傳遞到父組件中，修改counter的值；

演示代碼

父組件傳遞一個事件給子組件CounterButton

import React, { Component } from 'react' import ConterButton from './c-cpn/ConterButton'export class App extends Component {constructor() {super()this.state = {conter: 100}}changeConter(conter) {this.setState({ conter: this.state.conter + conter })}render() {const { conter } = this.statereturn (<div><h2>{conter}</h2>{/* 向子組件中傳入一個事件 */}<ConterButton getConter={conter => this.changeConter(conter)}/></div>)} }export default App

子組件在按鈕發生點擊時, 對父組件的傳遞的函數進行回調, 并傳入一個參數出去

import React, { Component } from 'react'export class ConterButton extends Component {btnClick(conter) {// 當按鈕發生點擊事件時, 對父組件傳遞過來的函數進行回調this.props.getConter(conter)}render() {return (<div><button onClick={() => this.btnClick(-1)}>-1</button><button onClick={() => this.btnClick(1)}>+1</button></div>)} }export default ConterButton

總結

以上是生活随笔為你收集整理的React组件通信-父子组件间的通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。