React 高阶组件（HOC） 简单的dom

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyCompoenet1 from './Components/MyCompoenet1';
import MyComponent2 from './Components/MyComponent2';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.Fragment>
        <MyCompoenet1></MyCompoenet1>
        <MyComponent2></MyComponent2>
    </React.Fragment>
);

高阶组件函数：

import React from 'react';

export default function withName(Components, age) {

// 这里是一个组件
    function myComponent() {
        return (
            <React.Fragment>
                <Components></Components>
                <div>-----his {age} years-------</div>
            </React.Fragment>
        );
    }
    
    //返回组件
    return myComponent;
}

自定义组件1

import React from 'react'
import withName from './withName'

 function MyCompoenet1() {
  return (
    <div>MyCompoenet1</div>
  )
}
// 不直接暴露MyComponent2, 暴露高级组件，参数是当前组件和需要的参数
export default withName(MyCompoenet1, '张三')

自定义组件2

import React from 'react'
import withName from './withName'

 function MyComponent2() {
  return (
    <div>MyComponent2</div>
  )
}
export default withName(MyComponent2, '李四')

只在高阶组件中给自定义组件新增属性：

高阶组件函数：

import React from 'react';

export default function withName(Components, age, name) {
    function myComponent() {
        return (
            <React.Fragment>
                <Components name={name}></Components>
                <div>-----his {age} years-------</div>
            </React.Fragment>
        );
    }
    return myComponent;
}

自定义组件1

import React from 'react'
import withName from './withName'

 function MyCompoenet1(props) {
  return (
    <div>MyCompoenet1</div>
    <div> his {props.nanme} <div>
   )
}

export default withName(MyCompoenet1, '张三'， 30)

自定义组件2

import React from 'react'
import withName from './withName'

 function MyComponent2(props) {
  return (
    <div>MyComponent2</div>
    <div> his {props.nanme} <div>
  )
}
export default withName(MyComponent2, '李四'， 20)

index.js引用不变