鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

React.js+SVGでAdjacent XJS elements must be wrapped in an enclosing tag

コンポーネントを2つ並べるとエラーになってしまう。1つだと大丈夫。

</** @jsx React.DOM */

var Rectangle = React.createClass({
    render: function() {
        return (
        <rect {...this.props}></rect>);
    }
});

var RoadFragment = React.createClass({
    render: function() {
        var x = this.props.x + this.props.span;
        var width = this.props.width-this.props.x-this.props.span;
        return (
          <Rectangle x="0" y={this.props.y} width={this.props.x} height="10" ></Rectangle>
          <Rectangle x={x} y={this.props.y} width={width}        height="10" ></Rectangle>
        );

    }
});

以下のようにdivでwrapして上げたら、エラーはでなくなるけれど、rectが表示されなくなってしまう。

</** @jsx React.DOM */


var RoadFragment = React.createClass({
    render: function() {
        var x = this.props.x + this.props.span;
        var width = this.props.width-this.props.x-this.props.span;
        return (
          <div>
            <Rectangle x="0" y={this.props.y} width={this.props.x} height="10" ></Rectangle>
            <Rectangle x={x} y={this.props.y} width={width}        height="10" ></Rectangle>
          </div>
        );

    }
});

SVGでdiv使おうとしていた

svgでグループ化するのはdivではくgということでした。

https://developer.mozilla.org/ja/docs/Web/SVG/Element/g


gを使うことで、きれいにかけるようになる。

</** @jsx React.DOM */


var RoadFragment = React.createClass({
    render: function() {
        var x = this.props.x + this.props.span;
        var width = this.props.width-this.props.x-this.props.span;
        return (
          <g fill={this.props.fill}>
            <Rectangle x="0" y={this.props.y} width={this.props.x} height="10" ></Rectangle>
            <Rectangle x={x} y={this.props.y} width={width}        height="10" ></Rectangle>
          </g>
        );

    }
});

これに気づくのに、2日以上。うんうん、うなってしまった。
Rectangleというカスタムコンポ―ネントはrectをラップしているだけだから、
この階層でgと共に、rectを記述してしまってもいいかも。