React statelessコンポーネント内のAjaxコール

Question

私は1つのステートレスコンポーネントに反応し、内部HTMLは動的になります。

私はajaxデータを取得してhtmlとして設定しようとしていました。それは単純なhtmlのように振る舞います（新しいhtmlには他の反応コンポーネントが含まれていますが、反応コンポーネントとしてはコンパイルされていません）。

だから、ajaxコールからhtmlを取得し、それを反応コンポーネントとしてコンパイルしてstateless componentに設定する方法はありますか？ @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> 
}