React无状态组件中的Ajax调用

Ajax call in React stateless component

本文关键字：Ajax 调用 组件 状态 React      更新时间：2023-09-26

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

所以我试图获得ajax数据并将其设置为html。但它的行为就像普通的HTML(意味着新的HTML包含其他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;

不，无状态组件不应该能够动态地改变自己。您可以使用jquery将更改hack到组件中，但不建议这样做，因为由无状态组件呈现的内容只应该是其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>
}
相关文章：