DOM内に配置する前にReactJSコンポーネントをメモリにレンダリングする

Question

私のアプリケーションにはタイルの概念があります。

タイルが動的に読み込まれます。 initメソッドを使用してDOM要素に対して初期化することができます。タイルはレンダリング自体を処理します。

機能/私のタイルは、/

import contentsComponentFactory from './components/contents/factory' 

const tile = { 
    init, 
}; 

// `el` is a DOM element 
function init(el) { 
    // Render a "contents" ReactJS component (see below) to the DOM - how? 
    // Is the following possible? 
    el.appendChild(contentsComponentFactory.create({ props }).render()); 
} 

export default tile; 

tile.jsタイルが画面にタイルコンテンツをレンダリングコンポーネントcontentsを有しています。 initに私はメモリの内容をレンダリングするでしょうし、DOMに結果を挿入し

機能/私のタイル/コンポーネント/コンテンツ/ factory.js AngularJSで

const factory = { 
    create 
}; 

function create(options) { 
    const component = Object.create(React.Component.prototype); 

    component.props = options.props; 
    component.state = { message: 'This is a tile' }; 
    component.render = function() { 
    return <div>{this.state.message}</div>; 
    }; 

    return component; 
} 

export default factory; 

、。 ReactJSでこれを行うことはできますか？

私はReactJSを初めて使用しているので、何かを完全に誤解している可能性があります。

Answer 1

React.createElementを使用してメモリに要素を作成し、ReactDOM.render()をDOMに挿入する必要があります。

const element = React.createElement('div', null, 'Hello, World!'); 
ReactDOM.render(element, document.getElementById('content')); 

http://codepen.io/mikechabot/pen/PGXwxa?editors=1010

しかし、createElementは、ネイティブのDOM要素ではなく、ReactElementのインスタンスを返しません。これがあなたのニーズに合っているかどうかは不明です。

Answer 2

これはAngularJSで作業するのはかなり複雑なようですが、デザインを考え直すべきでしょうか？

Reactではさらに悪いですが、ReactDOMをバイパスして手動で挿入しようとしていますか？

これを試す前に、少なくともReactチュートリアルを実行することをおすすめします。