Реакция с использованием реагирующего компонента внутри опасноSetInnerHTML

Question

У меня есть вопрос об использовании реакции. Как вы можете видеть из названия, мне интересно, можно ли использовать компонент React (созданный React.createClass) внутри свойства «dangerouslySetInnerHTML». Я пытался, но Реагировать просто печатает код без преобразования, как это:

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

Я ожидал

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

но код просто так же, как исходная строка, и это означает, что React не превращал MySubComponent.

Есть ли способ решить эту проблему? Вышеприведенный пример просто прост, но мой фактический код довольно сложный. Это будет очень благодарно gimme за руку;)

Answer 1

dangerouslySetInnerHTML ожидает объект JS с __html свойством, которое должно быть допустимым разметкой HTML. Вместо этого вы предоставляете <MySubComponent /> и ожидаете, что он отобразит html этого компонента. Реакция не будет обрабатываться <MySubComponent />. dangerouslySetInnerHTML, как следует из названия, следует избегать. Более того, то, что вы пытаетесь сделать здесь, легко может быть сделано только через Реакт.

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

Старый вопрос, но для будущих wonderers я думаю, что я мог бы иметь решение этой проблемы, но не отметить, что это, безусловно, сломать redux поток, если вы используете его в вашем проекте.

В принципе, вы должны иметь id в своем dangerousSetInnerHTML текстах.
Идея состоит в том, чтобы установить на этот id в крючок жизненного цикла componentDidMount после того, как ваш «опасный HTML» был установлен в DOM.

например.

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

Обратите внимание, что componentDidMount будет, однако, не может быть названо на обновления компонентов. Для получения дополнительной информации об этом обратитесь к lifecycle hook of react.

Справедливое предупреждение, хотя это чувствуется hacky и есть. У этого также есть свои ограничения, как я упомянул выше, но может быть время, когда у вас есть нет другого варианта, кроме как использовать dangerousSetInnerHTML и в такие моменты, как это, это вариант. В другое время делайте то, что предложил @Rohit Singh Sengar и попытайтесь сделать это в react.