我应该使用 ReactDOMServer.renderToString() 还是任何其他方式将 react 组件渲染为字符串? [英] Should I use ReactDOMServer.renderToString() or any other way to render a react component to a string?

问题描述

我正在使用 Leafet 从一个更大的地图组件中提取一个小组件，并且似乎不可能包含将 JSX 转换为 Leafet DivIcon 的 html 字符串.

更大的地图组件渲染部分:

render() {const {tobject, strings} = this.props让圆 = classes.redCircle如果(tobject.lastPoint.activeEvents.ignition){circle = classes.greenCircle}const 图标 = 新窗口.L. DivIcon({html:` <div class= ${classes.tobjecticon}><span class= ${classes.tobjecticontext}><div class= ${circle}></div></span></div>`})

新提取的组件StatusCircle.js:

从 'react' 导入 React从'./StatusCircle.scss'导入类export const StatusCircle = ({ status}) =>{让圆 = classes.redCircle如果(状态){circle = classes.greenCircle}返回 (<div className={circle} ></div>)}导出默认状态圈

我的问题似乎类似于 这个.我已经尝试过 StatusCircle 的 renderToString()，但使用 ReactDOM(在那里已弃用)而不是 ReactDOMServer 并没有说没有这样的功能.可以使用 ReactDOMServer.renderToString() 或 .renderToStaticMarkup() 来实现这一点，还是最好保持不变而不提取?

解决方案

将内部 html 留在父组件内部是可以的.但这里是一种不使用 ReactDOMServer 将其呈现为标记的方法.这有点棘手=)

class Inner extends React.Component {使成为 () {返回 (<span {...this.props}>内部元素</span>)}}class Outer 扩展 React.Component {使成为 () {const span = document.createElement('span');ReactDOM.render(<Inner className="red"/>, span);//目标html控制台日志(span.innerHTML)；返回 (<div>你可以使用这个html<预>{span.innerHTML}

)}}ReactDOM.render(, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

I am extacting a tiny component from a bigger map component on an app using Leafet and it seems impossible to include the JSX into the html string of Leafet DivIcon.

bigger map component render part:

render () {
  const {tobject, strings} = this.props

  let circle = classes.redCircle

  if (tobject.lastPoint.activeEvents.ignition) {
    circle = classes.greenCircle
  }

  const icon = new window. L. DivIcon({
  html:
  ` <div class= ${classes.tobjecticon}><span class= ${classes.tobjecticontext}><div class= ${circle}></div></span></div> `
})

newly extacted component StatusCircle.js:

import React from 'react'
import classes from './StatusCircle.scss'

export const StatusCircle = ({ status}) => {

  let circle = classes.redCircle

  if (status) {
    circle = classes.greenCircle
  }

  return (
    <div className={circle} ></div>
  )
}

export default StatusCircle

My question seems similar to this one. I've tried renderToString() of StatusCircle, but using ReactDOM (deprecated there) and not ReactDOMServer and it didn't work saying there is no such function. Is it okay to use ReactDOMServer.renderToString() or .renderToStaticMarkup() to achieve this or is it better to leave unchanged without extraction?

解决方案

It is OK to leave inner html inside of parent component. But here is the way to render it to markup without using ReactDOMServer. It's a bit tricky way =)

class Inner extends React.Component {
  render () {
    return (
      <span {...this.props}>Inner Element</span>
    )
  }
}

class Outer extends React.Component {
  render () {    
    const span = document.createElement('span');
    ReactDOM.render(<Inner className="red" />, span);    
    
    //target html
    console.log(span.innerHTML);
    
    return (
      <div>
        You can use this html
        <pre>
          {span.innerHTML}
        </pre>    
      </div>
    )
  }
}

ReactDOM.render(<Outer />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这篇关于我应该使用 ReactDOMServer.renderToString() 还是任何其他方式将 react 组件渲染为字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！