React高阶组件

最新推荐文章于 2024-03-24 23:41:34 发布

My_Java_Life

最新推荐文章于 2024-03-24 23:41:34 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.csdn.net/My_Java_Life/article/details/108637264

react 专栏收录该内容

6 篇文章

订阅专栏

高阶组件本质上是一个函数，这个函数一定是接收一个组件，加工后，返回一个新组件

上代码

Test.js

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        <p>{this.props.title}</p>
      </div>
    );
  }
}

export default Test

WithLog.js

WithLog就是一个高阶组件
WithLog接收一个组件，打印接收的组件名，然后给组件添加一个属性name，并返回新的组件

import React, { Component } from 'react';

const WithLog = (Comp) => {
  console.log(Comp.name);
  
  const attr = { name: '高阶组件' }
  const NewComp = (props) => {
    return (
      <Comp {...props} {...attr}></Comp>
    )
  }
  return NewComp
}

export default WithLog;

使用 WithLog

import React from 'react';
import Test from "./Test";
import WithLog from "./WithLog";

function App() {
  return (
    const NewComp = WithLog(Test)
    <div className="App">
      <NewComp title='11111'></NewComp>
    </div>
  );
}