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

Question

如何通过JS的innerHTML()函数返回一个组件？使用下面的代码，它返回到浏览器屏幕上: [对象对象]

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 />);