jsx、ts动态渲染ref，并获取

在React中使用JSX和TypeScript动态渲染组件并获取ref可以通过以下方式实现：

1. 使用useRef钩子创建一个ref。
2. 将ref传递给要动态渲染的组件。
3. 使用ref属性将ref附加到DOM元素或自定义组件。

以下是一个简单的例子：

import React, { useRef, useEffect } from 'react';
 
function DynamicComponent() {
  const myRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    if (myRef.current) {
      // 可以访问myRef.current来获取DOM元素或组件的实例
      console.log(myRef.current.innerHTML);
    }
  }, []);
 
  return (
    <div ref={myRef}>
      这是一个动态渲染的组件，并且我们可以通过ref访问它的DOM节点。
    </div>
  );
}
 
export default function App() {
  // 动态决定渲染哪个组件
  const ComponentToRender = DynamicComponent;
 
  return (
    <div>
      <ComponentToRender />
    </div>
  );
}

在这个例子中，DynamicComponent函数组件包含了一个ref，它被赋值给一个div元素。App组件动态决定渲染哪个组件，这里是DynamicComponent。当App渲染DynamicComponent时，它会传递ref给div，这样我们就可以在DynamicComponent内部通过myRef.current访问到这个div元素。