javascript - React 无状态组件中的 Ajax 调用

Question

我有一个 React 无状态组件，它的内部 html 是动态的。

所以我试图获取ajax数据并将其设置为html。但它的行为就像普通的 html(意味着新的 html 包含其他 react 组件。但这些组件不会编译为 react 组件)。

那么，有什么方法可以从 ajax 调用中获取 html 并将其设置为 React 无状态组件，并将其编译为 React 组件？

---

更多细节根据@Gosha Arinich 的要求:

基本上我想制作弹出功能。因此，主弹出组件将承载弹出的外部结构、页眉和页脚。并且不同弹出窗口的内容将设置在其他文件中，我想获取请求文件的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>
}