2016-04-18 22 views
0

node.jsアプリケーションのテンプレートライブラリとしてreact.jsを使用しています。私は反応コンポーネントのjsx構文を使用しています。私はentities/jsxファイルをレンダリングする/エンティティのようなルートを持っています(ビューです)。 entities.jsxファイルに次のコードがあります。私はコード内でonclickhandlerを呼び出そうとしていますが、React.renderを使って明示的にレンダリングしていませんが、localhost:/エンティティを押したときにコンポーネントがブラウザに表示されますが、onclickハンドラは起動しません。私がオンラインに見てきたReact.js onclickハンドラが動作しない

var MyComponent = React.createClass({ 
    alertMessage: function() { 
     alert(this.props.name);        
    }, 
    render: function() { 
     return (
     <div onClick={this.alertMessage}> 
     Hello {this.props.name} 
     </div> 
    ); 
    } 
}); 

例は、HTML内に埋め込まJSXスクリプトやHTMLのdivタグ内にレンダリングコンポーネントをレンダリングするが、私は私のNode.jsアプリケーションでreact.jsを使用しようとしています。私はhtmlタグ内でレンダリングしたくないが、コンポーネントはURLに基​​づいてレンダリングし、動的でなければならない。

私のノードアプリケーションのindex.jsファイルに次のコードスニペットがある。ビューのエンティティをレンダリングするindex.jsファイルを通して、ビュー 'エンティティ'にヒットしました。

app.get('/entities', function(req, res) { 
    res.render('entities', { 
    title: 'Entities - Turkey Disclosure', 
    name: 'Entities', 
    selection: 'header-entities' 
    }); 
}); 
+0

これは動作しません。どうやらそれはES6の構文にのみ当てはまります – medha

+0

あなたのサンプルはあなたの期待どおりに動作します(https://jsfiddle.net/69z2wepo/39094/) –

+0

私はReact.renderを使用していません。私がそうすると、ReferenceError:document is definedが定義されていないというエラーが出る – medha

答えて

1

あなたが正しくなるなら、React.renderToString()を使用して、ノードアプリケーションで反応させます。 ReactはonClickと他のイベントステートメントをマークアップに直接挿入しません。これらのイベントを保持したい場合は、既にサーバーでレンダリングされたマークアップを持つノードでReact.render()と呼ぶべきです。 Reactはそれを保存し、イベントハンドラのみをアタッチして、非常にパフォーマンスの高い最初のロード経験を持つことができます。

There's a nice article Reactの3つのレンダリング方法の違いを説明します。

関連する問題