53820


下のＵＲＬでどうやってローソク足が描画されているのか調べています。  
CandlestickSeriesコンポーネントがそれを担っていると思いますが、CandlestickSeries内でrenderされたGenericChartComponentにrenderが定義されていません。では、GenericChartComponentの返り値は何になるのでしょうか？  
<https://codesandbox.io/s/github/rrag/react-stockcharts-
examples2/tree/master/examples/CandleStickChart>

[code]

    class CandlestickSeries extends Component {
    constructor(props) {
        super(props);
        this.renderSVG = this.renderSVG.bind(this);
        this.drawOnCanvas = this.drawOnCanvas.bind(this);
    }
    drawOnCanvas(ctx, moreProps) {
        drawOnCanvas(ctx, this.props, moreProps);
    }
    renderSVG(moreProps) {
        const { className, wickClassName, candleClassName } = this.props;
        const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
    
        const candleData = getCandleData(this.props, xAccessor, xScale, yScale, plotData);
    
        return <g className={className}>
            <g className={wickClassName} key="wicks">
                {getWicksSVG(candleData)}
            </g>
            <g className={candleClassName} key="candles">
                {getCandlesSVG(this.props, candleData)}
            </g>
        </g>;
    }
    
    render() {
        const { clip } = this.props;
        return <GenericChartComponent
            clip={clip}
            svgDraw={this.renderSVG}
            canvasDraw={this.drawOnCanvas}
            canvasToDraw={getAxisCanvas}
            drawOn={["pan"]}
        />;
    }
    
[/code]

}

以下genericChartComponent  
<https://github.com/rrag/react->[stockcharts/blob/master/src/lib/GenericChartComponent.js](https://github.com/rrag/react-
stockcharts/blob/master/src/lib/GenericChartComponent.js)

genericChartComponentは初期化とメソッド定義のみで何も返さず終了するように見えます。


CC BY-SA 4.0
2019-03-30T03:39:14.580
53817
2019-03-30T05:50:06.523
32180
question
reactjs
React.js renderのないクラス定義


genericChartComponentの定義を見ると、

[code]

    class GenericChartComponent extends GenericComponent {
        ....
    }
    
[/code]

となっています。この`extends
GenericComponent`というのは、`GenericChartComponent`クラスは`GenericComponent`を **継承**
するクラスであるという宣言です。

よって、`GenericChartComponent`クラスは自身で宣言したメソッドの他に、`GenericComponent`で宣言されているメソッドを持っています。

[`GenericComponent`の定義](https://github.com/rrag/react-
stockcharts/blob/master/src/lib/GenericComponent.js#L27)を見てみると378行目に`render`が定義されていますから、`GenericChartComponent`もこの`render`を使用して描画されることになります。


CC BY-SA 4.0
2019-03-30T05:21:54.607
53820
2019-03-30T05:50:06.523
2019-03-30T05:50:06.523
30079
30079
53817
answer