Question

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

所以我试图获取ajax数据并将其设置为html。但它只是表现得像普通的html（意味着新的html包含其他反应组件。但那些没有编译为反应组件）。

那么，有没有办法从ajax调用中获取html并将其设置为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>
}

在React无状态组件中调用Ajax

1 个答案: