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を記述してしまってもいいかも。