ReactJS - 从 innerHtml 函数返回一个组件

Question

如何通过JSinnerHTML()函数返回一个组件？使用下面的代码，它在浏览器屏幕上返回： [object Object]

document.getElementById("threeline-icon").innerHTML =
        `${<ThreelineIcon />}`
        ;
    }

组件代码：

import React from 'react'

const ThreelineIcon = () => {
  return ( 
    <div>
    <span className="top"></span>
    <span className="middle"></span>
    <span className="bottom"></span>     
    </div>
  )
}

export default ThreelineIcon

Answer 1

您可以使用renderToString服务器端渲染使用的方法将 React 组件转换为 HTML。但是请记住，这仅在您的组件是静态的情况下才有效，我的意思是任何事件或生命周期方法（除了componentWillMount）都不起作用。

import ReactDOMServer from 'react-dom/server';
document.getElementById("threeline-icon").innerHTML =
    ReactDOMServer.renderToString(<ThreelineIcon />);