React：ページにすべてのコンポーネントをマウントするには？

PHPフレームワークによってレンダリングされたドキュメントのHTMLマークアップに基づいてReactコンポーネントをマウントできるようにしたいが、これを実現する方法が見つからない。ここでReact：ページにすべてのコンポーネントをマウントするには？

は私の文書のHTMLマークアップである：ここで

<html> 
<head> 
    <link rel="stylesheet" href="css/index.css"> 
</head> 
<body> 
    <div id="app"> 
     <Foo bar="lorem"></Foo> 
     <Foo bar="ipsum"></Foo> 
     <Foo bar="dolor"></Foo> 
    </div> 
<script src="js/index.js"></script> 
</body> 
</html>

はフー・コンポーネントの実装（foo.jsは）次のとおりです。

const React = require('react'); 

class Foo extends React.Component { 
    render() { 
    return React.createElement('div', { 
     className: 'foo' 
    }, `Hello ${this.props.bar}`); 
    } 
} 

module.exports = Foo;

そしてここでは、私のアプリの実装（app.js）であります：

const React = require('react'); 
const ReactDOM = require('react-dom'); 

require('./foo'); 

ReactDOM.render(
    React.createElement('div'), 
    document.getElementById('app') 
); 

module.exports = {};

私は再帰的にの中に発見、すべての部品を装着するように反応する期待してい210 DIVだけ#appのdivを次のマークアップが生じ搭載されているいくつかの理由：

<div id="app"> 
    <div data-reactroot=""></div> 
</div>

私は私がここで間違ってやっているものに私の指を置くことはできません。だから、

出典

2017-06-09 Eric MORAND

、あなたがレンダリングしているときにapp.jsあなたがdiv要素を作成し、するためには、ID =アプリ

でルートdivの内側にそれをレンダリングしている。この場合、DOM

ReactDOM.render(
    React.createElement('div'), 
    document.getElementById('app') 
);

を反応させますあなたがしなければならないのは、これが

出典

2017-06-09 13:34:41 lavish

トンのに役立ちます。この

const Foo = require('./foo'); ReactDOM.render( <div> <Foo bar="lorem"></Foo> <Foo bar="ipsum"></Foo> <Foo bar="dolor"></Foo> </div> document.getElementById('app') );

希望で複数のfoo要素を作成しますヒンジはどのコンポーネントがアプリの一部になるのか分かりません。これはまさにコンポジション（コンポーネントベースのアプローチとも呼ばれます）のことです。コンパイル時にあなたのページの内容は何か分かりません。ページの内容は、ユーザがバックオフィスで作成するレイアウトに基づいて、サーバ側のPHPフレームワークによって処理されます。 –

私が答えたところでは、 '' 'React.createElement（ 'div'）、' 'はdiv要素を作成してレンダリングするので間違っています。あなたが実際にやりたいことは、PHPスクリプトがその行の代わりに送信して適用している要素をつかむことだと思います。 – lavish

私のReadDOM.render呼び出しが原因です。 –

React：ページにすべてのコンポーネントをマウントするには？

答えて

関連する問題