如何解决useRef获取不到挂载的组件以及 antd中input聚焦末端

首先 博主遇见的场景是像下面的场景类似， 首先页面并没有渲染出input.TextArea组件，而是span 与 Button 组件先渲染，然后inputRef为空，没有挂载到input.TextArea。
当与用户交互且用户点击了button组件后flag转变成为1的时候， input才会被渲染出来, 但是useRef的机制就是，它第一创建了后，后面再次执行这个语句的时候会判断其前面存不存在，如果存在的话是不会在创建新的ref， 所以这样inputRef是挂载不到Input.TextArea组件的。
所以我们可以通过把Input.TextArea组件化， 创建一个新的文件（第三个代码块），在这个代码块中为们可以实现 聚焦文本域末端的作用， 且不要忽视了autoSize这个属性的作用。

// 挂载不成功实例
import React, {useRef} from 'react';
import {Input} from 'antd';
import type { InputRef } from 'antd';

const Test: React.FC = () => {
const  [flag, setFlag] = useState(0);
const inputRef = useRef<InputRef>(null);
return  flag ? (
          <Input.TextArea
            rows={1}
            onChange={(input) => {
              handleDebounceSetInputValue(input.target.value);
            }}
            defaultValue={record.remarks}
            showCount
            maxLength={100}
          />
        ) : (
          <span className={styles.remarks}>{record.remarks}</span>
          <Button type ='primary' onClick={() => setFlag(1)}></Button>
        );
        }

// 组件化实例
import React, { useEffect, useRef } from 'react';
import { Input } from 'antd';

export const TextArea: React.FC<any> = (props) => {
  const inputRef = useRef<any>(null);
  useEffect(() => {
    inputRef.current!.focus({
      cursor: 'end',
    });
  }, []);
  return <Input.TextArea ref={inputRef} {...props} autoSize></Input.TextArea>;
};

// 挂载成功实例
import React, {useRef} from 'react';
import {Input} from 'antd';
import type { InputRef } from 'antd';

const Test: React.FC = () => {
const  [flag, setFlag] = useState(0);
const inputRef = useRef<InputRef>(null);
return  flag ? (
          <TextArea
            rows={1}
            onChange={(input) => {
              handleDebounceSetInputValue(input.target.value);
            }}
            defaultValue={record.remarks}
            showCount
            maxLength={100}
          />
        ) : (
          <span className={styles.remarks}>{record.remarks}</span>
          <Button type ='primary' onClick={() => setFlag(1)}></Button>
        );
        }