我应该使用 ReactDOMServer.renderToString() 还是任何其他方式将反应组件呈现为字符串？

Question

我正在使用 Leafet 从应用程序上较大的地图组件中提取一个小组件，似乎不可能将 JSX 包含到 Leafet DivIcon 的 html 字符串中。

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

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> `
})

新提取的组件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

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

Answer 1

可以将内部 html 留在父组件中。但这是在不使用ReactDOMServer 的情况下将其呈现为标记的方法。这有点棘手=）

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>

Answer 2

我不想在项目中添加更多导入并依赖它们，但是在 render() 中使用 ReactDOM.Render 会给出：“警告：_renderNewRootComponent()：渲染方法应该是 props 和 state 的纯函数; 不允许从render触发嵌套组件更新。如果需要，在componentDidUpdate中触发嵌套更新。检查StatusCircle的render方法”。虽然ReactDOMServer.renderToStaticMarkup() 像这样完美地工作：

class App extends React.Component{
  render() {

    let greenCircle = ReactDOMServer.renderToStaticMarkup(<StatusCircle status={true} />)
    console.log(greenCircle)
    let redCircle = ReactDOMServer.renderToStaticMarkup(<StatusCircle status={false} />)
    console.log(redCircle)

    return (
        <div>
          <StatusCircle status={true} />
          <StatusCircle status={false} />
        </div>
    )
  }
}

const StatusCircle = ({status}) => {

  let circle = "redCircle"

  if (status) {
    circle = "greenCircle"
  }

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

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

 

.redCircle {
  background-color: red;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  margin: 10px;
}

.greenCircle {
  background-color: green;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  margin: 10px;
}

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