Ajax call in React stateless component

Question

У меня есть один компонент без гражданства, и его внутренний html будет динамическим.

Итак, я попытался получить данные ajax и установить его как html. но он просто ведет себя как простой html (означает, что новый html содержит другие реагирующие компоненты, но они не компилируются как компонент реакции).

Итак, есть ли способ получить html из вызова ajax и установить его для ответа на компонент без гражданства с компиляцией его в качестве компонента реакции?

---

Подробнее По запросу @Gosha Аринич:

В основном я хочу сделать всплывающую функциональность. Таким образом, основной компонент popup будет иметь внешнюю структуру, верхний и нижний колонтитулы всплывающего окна. и содержимое разных всплывающих окон будет установлено в других файлах, и я хочу получить ajax запрошенного файла и установить его как html в всплывающее тело.

import React, { PropTypes } from 'react'; 

function getDataFromFile(filename){ 
    $.get(filename, function (result) { 
     document.getElementById("content").innerHTML = result; 
    }) 
} 

const Popup = ({filename}) => { 
    getDataFromFile(filename); 

    return (
     <div className="popup-container"> 
      <PopupHeader /> 
      <div id="content"></div> 
      <PopupFooter /> 
     </div> 
    ); 
}; 

// prop validation 
Popup.propTypes = { 
    filename: PropTypes.string.isRequired 
}; 

export default Popup; 

Answer 1

Нет, компоненты без гражданства не должны динамически изменять себя. Вы можете использовать jquery для взлома изменений в компоненте, но это не рекомендуется, так как то, что визуализируется компонентом без гражданства, должно быть только продуктом его props.

Лучше всего решение обернуть его:

var ParentComponent = React.createClass({ 

    getInitialState: function(){ return {html: null}; } 
    componentWillMount: function(){ 
     // Do ajax call instead of timeout 
     setTimeout(function(){ 
      this.setState({html: 'abcd'}); 
     }.bind(this)) 
    }, 

    render: function(){ 
     return (
      <div> 
        <OtherReactComponentsHere/> 
        {this.state.html? <StatelessChild html={this.state.html} /> : <span>Loading...</span>} 
      </div> 
     ); 
    } 
}) 

Функция визуализации StatelessChild будет выглядеть так:

render: function(){ 
    return <span dangerouslySetInnerHTML={{__html: this.props.html}}></span> 
}