高阶组件写法

Question

我想在一个组件的前后分别加一写文案,
写完后发现组件没有显示, 帮忙看看是哪个地方写错了

import React, { Component } from 'react';
import { Input } from 'antd';

// 高阶组件
export default function HOC(WrappedComponent) {
  class Container extends Component {
    
    render() {
      const { value, after, before } = this.props;
      return (
        <div>
          <span>前缀</span>
          <WrappedComponent
            value={value}
            onChange={(e) => console.log(e)}
          />
          <span>后缀</span>
        </div>
      )
    }
  }
  return Container;
}

// 普通组件
import React, { Component } from 'react';
import HOC from './HOC';

class commonComponent extends Component {

  render() {
    const arr = [{value: 1, after: '1', before: '1'},{value: 2, after: '2', before: '2'},{value: 3, after: '3', before: '3'}];
    return (
      <div>
        {arr.map((item, index) => {
          const { value, before, after } = item;
          return (
            <div key={index} before={before} after={after}>
              <Input
                value={value}
                onChange={(e) => console.log(e)}
              />
            </div>
          );
        })}
      </div>
    )
  }
}

export default HOC(commonComponent);