我應該使用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> ` 
}) 

新extacted組件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。我試過renderToString（） StatusCircle，但使用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

我不想更多的進口添加到項目中，並依靠他們，但使用ReactDOM.Render instide渲染（）是給「警告：_renderNewRootComponent（）：渲染方法應該是道具和狀態的純函數;不允許從渲染中觸發嵌套組件更新，必要時觸發componentDidUpdate中的嵌套更新，檢查StatusCircle的渲染方法。雖然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>