Ajax調用React無狀態組件

我有一個反應無狀態組件，它的內部html將是動態的。Ajax調用React無狀態組件

所以我曾試圖獲取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;

來源

2016-07-01 Hitesh Upadhyay

什麼是您的HTML是什麼樣子？請詳細說明您目前擁有的內容，以及您嘗試過的內容（使用代碼）以及您認爲應該有什麼不同的行爲。 –

不，無狀態組件不應該能夠動態改變它們自己。您可以使用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> 
}

來源

2016-07-01 18:23:53

Ajax調用React無狀態組件

回答

相關問題