如何在React父组件中获取子组件渲染后的HTML内容

你现在拿到[object Object]有两个核心原因：

• 组件入参写法错误：React函数组件的第一个入参是完整的props对象，你写的const Widget = (useVariant) => {}实际拿到的useVariant是{useVariant: '1'}对象，和字符串'1'做判断永远不会走预期分支，本身逻辑就有问题。
• JSX返回值不是HTML：<Widget />这种写法是React.createElement()的语法糖，返回值是描述UI结构的普通JS对象（也就是React元素），本身不是真实DOM，也不是HTML字符串，直接取值自然会显示[object Object]。

根据你的实际需求选对应方案即可：

方案1：仅需要页面正常渲染组件（绝大多数场景） #

不需要手动获取HTML字符串，只要修正Widget的入参写法，React会自动完成渲染：

// 从props对象里解构出useVariant属性
const Widget = ({ useVariant }) => {
   // 推荐用严格等于判断，避免隐式类型转换问题
   if(useVariant === '1') {
      return <div>ABC</div>
   } 
   return <div>DEF</div>
}

const getWidget = () => {
    return <Widget useVariant={'1'} />
}
// 这里拿到的是React元素，直接放到JSX里即可正常渲染
const widgetEle = getWidget()
return (
  <div>
    CDE
    {widgetEle}
  </div>
)

渲染后页面会正常显示CDE和ABC，对应DOM结构就是你预期的嵌套div。

方案2：需要获取纯HTML字符串（如导出内容、静态拼接等场景） #

如果你确实要拿到<div>ABC</div>这种文本格式的HTML，用react-dom提供的静态渲染方法转换即可：
首先导入对应方法：

// 适合拿纯净HTML的场景，生成的内容不带React额外标记属性
import { renderToStaticMarkup } from 'react-dom/server';
// 如果是服务端渲染需要后续注水，用renderToString，会带React内部属性
// import { renderToString } from 'react-dom/server';

然后转换React元素为HTML字符串：

const getWidget = () => {
    return <Widget useVariant={'1'} />
}
const widgetHtml = renderToStaticMarkup(getWidget())
console.log(widgetHtml) // 输出: <div>ABC</div>

注意：这种方式拿到的是纯字符串，不能直接放到JSX里当组件渲染，如果要渲染直接用方案1的React元素即可。

内容的提问来源于stack exchange，提问作者Alex