基于 Antd Design v4 版本中的 Input.Textarea 进行二次封装, 后来发现其实已经内置了, 不需要再次封装

实现思路

增加外层父级

  1. import React, { FC } from 'react';
  2. import { Input } from 'antd';
  4. interface TextareaCountProps extends TextareaProps {
  5.     showCount?: boolean;
  6. }
  8. const TextareaCount: FC<TextareaCountProps> = (props) => {
  9.   const { value, onChange } = props;
  12.     return (
  13.       <div style={{ position: 'relative' }}>
  14.         <Input.Textarea />
  15.     </div>
  16.   );
  17. }

Antd

查看了下最终渲染的 DOM 结构, 基于 ::after 和 attr()) 实现, 模拟下