Question

如何通过JS innerHTML()函数返回组件？使用下面的代码，它将在浏览器屏幕上返回： [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 />);

Answer 2

您实际上无法使用JavaScript直接访问dom元素并将其设置为react组件。您必须使用ReactDOM

Answer 3

您可以设置标志以显示组件。当您的标志为true时，默认情况下显示ThreelineIcon组件，将其设置为false。喜欢：

class Demo extends Component {
constructor(props){
super(props);
this.state = {flag:false}
}
.
    somefunction = (value) => {
        this.setState({ flag: !this.state.flag });
    }
.
  render() {
        return(
        .
<div>{this.state.flag && <ThreelineIcon />}</div>
        .
      }
}

您的组件代码：

import React from 'react'

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

export default ThreelineIcon

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

3 个答案: