からコンポーネントをレンダリング：<a href="http://facebook.github.io/react/docs/component-api.html">here</a>から外部ReactJS
「の唯一の方法で反応コンポーネントインスタンスへのハンドルを取得するために、外部のReact.renderの戻り値を格納することである反応します。」
私はReact以外のReactコンポーネントをレンダリングする必要があります。その理由は以下のとおりです。
私のnode.js、expressJSアプリでは、'react-router-component'と'react-async'を使用しています。実行されるようになっているapp.js -theファイル、App.jsxで
var url=require('url');
var App=require('./react/App.jsx');
var app = express();
app.get('*',function(req,res){
//}); SEE EDIT 1 BELOW
var path = url.parse(req.url).pathname;
ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) {
res.send('<!DOCTYPE html>'+markup);
});
});
、
PostList = require('./components/PostList.jsx');
var App = React.createClass({
render: function() {
return (
<html>
<head lang="en">
</head>
<body>
<div id="main">
<Locations path={this.props.path}>
<Location path="/" handler={PostList} />
<Location path="/admin" handler={Admin} />
</Locations>
<script type="text/javascript" src="/scripts/react/bundle.js"></script>
<script type="text/javascript" src="/scripts/custom.js"></script>
</body>
</html>
});
bundle.jsで
はすべて.jsxファイルからbrowserifiedファイルです。 PostList.jsxで
、custom.jsで
var PostList = React.createClass({
mixins: [ReactAsync.Mixin],
getInitialStateAsync: function(cb) {
if(typeof this.props.prods==='undefined'){
request.get('http://localhost:8000/api/cats_default', function(response) {
cb(null, {items_show:response.body});
});
}
},
setTopmostParentState: function(items_show){
this.setState({
items_show:items_show
});
},
render: function() {
return (
<div className="postList" id="postList">
**// Things go here**
<div className="click_me" >Click me</div>
</div>
}
});
PostListRender=function(cart_prods){
var renderNow=function(){
//return <PostList cart_prods={cart_prods}></PostList>
React.renderComponent(<PostList cart_prods={cart_prods}></PostList>,document.getElementById('postList'));
};
return {
renderNow:renderNow
}
};
module.exports=PostList;
：
$('.click_me').click(function(){
PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();
$('odometer').html('price');// price variable is calculated anyhow
});
ページがうまく表示されます。
EDIT 3つの開始
今私はclick_me divをクリックする上PostListコンポーネントをレンダリングします。
EDIT 3つの端部
しかし、私はclick_me要素をクリックすると、ブラウザがビジースクリプトを示し、コンソールは
ReactJS示し - ReactMountを：ルート要素は、元のコンテナから削除されました。新しい容器
そして、Firebugログの上限を超えています。
だから私は外react.jsからクリックでレンダリングしたい理由： 私はclick_me divをクリックする上でjQueryのOdomoeterプラグインを実行する必要があります。プラグインは、それがミドルウェアがインストールされている方法でインストールすることができ、プラグインのコードベースがnode_modulesフォルダ内に保存されが、ノードのミドルウェアとして開発されていませんでした。
EDIT2は、開始：
をプラグインが、ノードミドルウェアないので、私はrequireできないそれは内部ノードから。しかし、私はノードの中からクリックイベントを（コードが示されていない）を実行することができますし、そこにも、次のコードを実行します。この場合、
$('odometer').html('price');// price variable is calculated anyhow
を私は<script />タグと後に来るbrowserified bundle.jsブラウザでプラグインを含んでプラグインスクリプト。しかし、アニメーションは正しく表示されません。だから私はcustom.jsのクライアント側のクリックイベントに行く。
私はノード 内側からミドルウェアことだけbrowserified JSファイルと 前のページにそれを含まない
requireプラグインを行う場合は、クリックイベントを行う内部反応し、その後、オドメーターのアニメーションが 正しく表示されません。
EDIT2終了します。
のでPostListが反応外部のコンポーネントリアクトレンダリングする方法は何ですか？
EDIT 1});かなり間違ってそこに置かれた
あなたが尋ねている/ここでやろうとしていることを言うのはかなり難しいです。コードが書かれているように有効でないため、コピー/貼り付けの問題があった可能性があります。 JSFiddle、GitHubプロジェクト、または実際に動作している（またはそれほど動作していない）例がありますか？ –
@BrandonTilley、私はここに関連する部分だけを貼り付けました。私はしかし、ロジックだけが必要です。どのような問題がありますか？ –
@BrandonTilley、ページがブラウザに期待通りに表示されます。クライアントサイドReactからページ内の 'div'をクリックすると、そのページを再レンダリングします。これは私がしたいことです。 'click'イベントはクライアント側から行われます。なぜ私がReact内から 'クリック 'を引き起こさないのかという理由は、各クリックでjQueryプラグイン、すなわちオドメーターを実行しなければならないということです。そして、それをサーバー側のReact内から起動すると、プラグインはノードミドルウェアではありません。説明するものは何でも？ –