日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React高階組件使用詳細介紹_React

作者：-耿瑞- ? 更新時間： 2023-03-25 編程語言

首先 我們要了解什么是高階組件

第一 高階組件必須是一個函數

第二 高階組件接收一個參數，這個參數也必須是一個組件

第三 他的返回值 也是一個組件

至于高階組件的作用 我們后續會講解 本文只是帶大家認識一下高階組件 并手把手帶大家創建一個 下面我們來創建一個react項目

然后在src目錄下創建 文件夾目錄 components

在 components下面創建一個 assist.jsx

assist.jsx 參考代碼如下

import React from "react";
export function assist(Components){
    return class extends React.Component{
      render(){
        return (
          <Components {...this.props }/>
        )
      }
    }
}

這就是一個簡單的高階組件 首先 我們定義并導出了一個函數 他接收一個參數 叫Components 到時你用這個方法 就需要他的這個參數是一個組件

然后 這個方法return回去的還是一個組件 Components 而我們這里的 {…this.props } 表示 將父組件給的props整個傳給這個Components組件

然后在 components下創建一個 subset.jsx

參開代碼如下

import React,{Fragment} from "react";
export default class subset extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <Fragment>
         { this.props.name }
      </Fragment>
    )
  }
}

這里就是簡單創建了一個組件 使用了React下的Fragment 然后 在界面中使用了 this.props下的name

這個name就需要父組件傳入

然后 我們在components下創建 record.jsx

參考代碼如下

import React from "react";
import subset from "./subset";
import { assist } from "./assist";
const Subset = assist(subset);
export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: "小貓貓",
    }
  }
  render(){
    return (
      <div className="App">
         <Subset name = { this.state.name }/>
      </div>
    )
  }
}

此時 就可以看到 我們record.jsx同時引入了 subset.jsx和assist.jsx

用subset組件作為參數 調用了 assist下的assist函數 也就是我們的高階組件

這樣就滿足了 參數是組件的需求 聲明一個Subset接受高階組件的返回值 他還是一個組件

然后在界面中使用了這個Subset 并傳遞了 name 值 對應本組件的 state下的name

運行代碼如下

其實 相當于 將 subset 傳給了assist 而 assist 并沒有寫太多邏輯 只是接受到參數組件 又使用了參數組 并將父組件給到 props 給了參數組件

所以 相當于還是subset輸出的

其實高階組件還是讓邏輯靈活了很多 他的具體場景 我們后續會更新

原文鏈接：https://blog.csdn.net/weixin_45966674/article/details/128742893

欄目分類
最近更新