7190

[code]

    var React = require('react');
    module.exports = React.createClass({
      renderActually: function() {
        return <p>hoge</p>; 
      },
      render: function() {
        return {this.renderActually()};
      }
    });
    
[/code]

のような`JSX`ファイルを利用しようとすると、コンパイル時にエラーが出ます。  
代わりに

[code]

    render: function() {
      return <p>hoge</p>;
    }
    
[/code]

あるいは

[code]

    render: function() {
      return <div>{this.renderActually()}</div>;
    }
    
[/code]

とすれば正常にコンパイルされて動作します。最初のコードでエラーが起こるのは`JSX`のどういった仕様あるいは制限によるものでしょうか。


CC BY-SA 3.0
2015-02-27T01:14:32.377
7166
2015-02-27T04:47:31.020
2015-02-27T02:55:12.223
3313
3313
question
reactjs react-jsx
JSXのrender()で別の関数の戻り値だけを出力することができない理由を知りたい


自己解決しました。  
コードが評価される順序を気にする必要があります。

[code]

    renderActually: function() {
      return <p>hoge</p>;
    },
    render: function() {
      return <span>{this.renderActually()}</span>;
    }
    
[/code]

は、コンパイル後

[code]

    renderActually: function() {
      return React.createElement("p", null, "hoge");
    },
    render: function() {
      return React.createElement("span", null, this.renderActually());
    }
    
[/code]

となります。

  * コンパイル時に`this.renderActually()`は評価されない
  * `React.createElement`に置換される際の第1引数としてHTMLタグが必要

上記の代わりに

[code]

    render: function() {
      return this.renderActually();
    }
    
[/code]

とした場合は、コンパイル後もコードは変更されませんでした。

* * *

実際は

[code]

    render: function() {
      // arr は適当な配列
      return (
        { arr.map(function(elem) {
            return {this.anotherMethod(elem)};
          }.bind(this))
        }
      );
    }
    
[/code]

のような事をしたくて遭遇していたエラーだったのですが  
そもそも使い方を間違えている(`{}`内で評価する必要がない)ということがわかりました。


CC BY-SA 3.0
2015-02-27T04:40:51.980
7190
2015-02-27T04:47:31.020
2015-02-27T04:47:31.020
3313
3313
7166
answer