如何在调用ReactDOM.render前获取JSX元素的outerHTML？

哥们，我懂你要的是完全不需要实际渲染到DOM，就能拿到组件最终的HTML输出，而且是在Node.js环境里，那些渲染后再取outerHTML的方案对你完全没用对吧？刚好有个直接靠谱的解决办法，用React官方的服务器端渲染API就能搞定：

核心方案：用react-dom/server做预渲染 #

React的react-dom/server包提供了在Node.js环境下把组件转换成HTML字符串的方法，完全不需要浏览器DOM，完美符合你“渲染前”拿outerHTML的需求。

步骤1：安装依赖（如果还没装） #

npm install react react-dom

步骤2：编写代码转换组件 #

const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 你的组件定义（注意：JSX里要用className代替class，React会自动转成HTML的class）
function MyComp(props) {
  return (
    <div className="myJSX"> Some Content. { props.children } </div>
  )
}

// 将组件实例转换成HTML字符串
const targetHTML = ReactDOMServer.renderToStaticMarkup(<MyComp>hello</MyComp>);

console.log(targetHTML);
// 输出结果就是你要的：<div class="myJSX"> Some Content. hello </div>

细节说明 #

• 如果你之后需要在浏览器端做hydrate（把静态HTML激活成交互组件），可以用ReactDOMServer.renderToString代替renderToStaticMarkup，它会生成带React内部标识的HTML；但如果你只需要纯HTML字符串，renderToStaticMarkup生成的内容更干净，没有多余的React属性。
• 确保你的Node.js环境能解析JSX：可以用Babel配合@babel/preset-react转译，或者把文件后缀改成.jsx并配置Node.js支持ES模块，也可以用TypeScript直接处理。
• 如果你的组件里有依赖浏览器环境的API（比如window、document），需要在组件里做环境判断，比如：

  function MyComp(props) {
    return (
      <div className="myJSX">
        Some Content. { props.children }
        {typeof window !== 'undefined' && <p>只在浏览器显示的内容</p>}
      </div>
    )
  }
  

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