Reagieren mit Reaktionskomponente innerhalb von dangerouslySetInnerHTML

Question

Ich habe eine Frage zur Verwendung von reagieren. Wie Sie aus dem Titel sehen können, frage ich mich, ob es möglich ist, die React-Komponente (die von React.createClass erstellt wird) innerhalb der "dangerousSetInnerHTML" -Eigenschaft zu verwenden. Ich habe es versucht, aber Reagieren nur druckt Code ohne Transformation wie folgt aus:

const MySubComponent = React.createClass({ 
    render() { 
     return (<p>MySubComponent</p>); 
    } 
}); 

... 

let myStringHTML; 
myStringHTML += "<ul>"; 
myStringHTML += " <li>"; 
myStringHTML += "  <MySubComponent />"; 
myStringHTML += " </li>"; 
myStringHTML += "</ul>"; 

const MyComponent = React.createClass({ 
    render() { 
     return (
      <div dangerouslySetInnerHTML={{__html:myStringHTML}}></div> 
     ); 
    } 
}); 

I

erwartet

<ul> 
    <li> 
     <p>MySubComponent</p> 
    </li> 
</ul> 

aber der Code ist nur gleiche wie Original-String, und das bedeutet Reagieren nicht MySubComponent Transformation hat.

Gibt es eine Möglichkeit, dieses Problem zu lösen? Das obige Beispiel ist einfach, aber mein tatsächlicher Code ist ziemlich kompliziert. Es wird sehr Danke sein, gimme eine Hand;)

Answer 1

dangerouslySetInnerHTML erwartet ein JS-Objekt mit __html-Eigenschaft, die gültige HTML-Markup sein sollte. Stattdessen stellen Sie dort <MySubComponent /> bereit und erwarten, dass es den HTML-Code dieser Komponente rendert. React wird <MySubComponent /> dort nicht verarbeiten. dangerouslySetInnerHTML wie der Name schon sagt, sollte vermieden werden. Darüber hinaus kann das, was Sie hier erreichen möchten, einfach über React erfolgen.

const MySubComponent = React.createClass({ 
    render() { 
     return (<li><p>MySubComponent {this.props.index}</p></li>); 
    } 
}); 

const MyComponent = React.createClass({ 
    render() { 
     let subComponentList = []; 
     [1,2,3,4,5].forEach(function(i){ 
      subComponentList.push(<MySubComponent key={i} index={i} />); 
     }); 
     return (
      <ul>{subComponentList}</ul> 
     ); 
    } 
}); 

ReactDOM.render(<MyComponent />, mountNode); 

Answer 2

alte Frage, aber für zukünftige wonderers Ich glaube, ich eine Lösung für dieses haben könnte aber beachten Sie, dass dieser Fluss bricht Ihr definitiv redux, wenn Sie es in Ihrem Projekt sind.

Grundsätzlich sollten Sie id in Ihrem dangerousSetInnerHTML Text haben.
Die Idee ist, zu diesem id im componentDidMount Lifecycle-Hook zu mounten, nachdem Ihr "gefährliches HTML" an DOM gemountet worden ist.

z.B.

const myStringHTML = ` 
    <div id="someid"> 
    some text in my dangerous html 
    </div> 
`; 

const MySubComponent = React.createClass({ 
    render() { 
     return (<p>MySubComponent</p>); 
    } 
}); 

... 

let myStringHTML; 
myStringHTML += "<ul>"; 
myStringHTML += " <li>"; 
myStringHTML += "  <MySubComponent />"; 
myStringHTML += " </li>"; 
myStringHTML += "</ul>"; 

const MyComponent = React.createClass({ 

    componentDidMount() { 
     ReactDOM.render(<MyComponent />, document.querySelector('#someid')); 
    } 

    render() { 
     return (
      <div dangerouslySetInnerHTML={{__html: myStringHTML}}></div> 
     ); 
    } 
}); 

Sie beachten Sie, dass componentDidMount wird jedoch nicht auf Komponenten-Updates aufgerufen werden. Weitere Informationen hierzu finden Sie unter lifecycle hook of react.

Angemessene Warnung, obwohl dies fühlt hacky und es ist. Dies hat auch seine Einschränkungen, wie ich oben erwähnt habe, aber es kann Zeit geben, wo Sie keine andere Option haben, aber dangerousSetInnerHTML zu verwenden und zu Zeiten wie dies ist dies eine Option. Zu anderen Zeiten machen Sie was @Rohit Singh Sengar vorgeschlagen und versuchen Sie es in react zu tun.