Javascript 如何在react js中继承图表属性

如何将父组件方法和函数以及属性继承到子组件

    /*this is parent component*/

---

如何在Js中继承父类属性到子类属性？我可以实现融合图表，如果创建三个文件图表组件和条形图组件以及饼图组件，我想继承在barchartcomponent和piechartcomponent中使用的chartcomponent方法和属性首先，您不能使用它

    import  React from 'react';
    import fusioncharts from 'fusioncharts';
    import ReactFC from 'react-fusioncharts';

    class ChartComponent extends React.Component{
        constructor(){
            super();
            this.sate={};
            this.attributes=this.attributes.bind(this);
        }
        attributes(){
        var properties:{    "divLineAlpha": "0",
                            "showAlternateVGridColor": "0",
                            "bgcolor": "FFFFFF",
                            "showAxisLines": "1",
                            "axisLineAlpha": "25",
                            "plotBorderThickness": "0",
                            "showBorder": "0",
                            "showCanvasBorder": "0",
                            "showvalues":"0",
                            "usePlotGradientColor": "0",
                            "plotspacepercent": "50",
                            "showLimits":false, 
                            //"showXAxisValue":"0",
                            "paletteColors": "#32CD32,#4169E1,#87CEEB,#663399,#00FF7F,#6B8E23",                                                                   
                            "toolTipColor": "#000000",
                            "toolTipBorderThickness": "0",
                            "toolTipBgColor": "#B0C4DE",
                            "toolTipBgAlpha": "90",
                            "toolTipLeft":"0",
                            "toolTipRight":"90",
                            "toolTipBorderRadius": "3",
                            "toolTipPadding": "10",
                            "plottooltext": "<div id='headerdiv'  style='font-size: 14px; border-bottom: 1px solid #666666; font-weight:lighter; padding-bottom: 3px; margin-bottom: 5px; display: inline-block;'>$label </div>{br}<p style='font-size: 20px;color:#0000FF;text-align:center;'>$value&nbsp;<small style='font-size: 13px;'>$displayValue</small>{br}<p style='font-size: 20px;text-align:center;font-weight:lighter;'>Chargebacks</p>{br}</i></p>"
            }   
        }
        render(){
            return(
                <p>{this.attributes()}</p>
                );
        }
    }

    export default ChartComponent;

/*child component */
import React from 'react';
import fusioncharts from 'fusioncharts';
import ReactFC from 'react-fusioncharts';
import ChartComponent from './chartComponents';

class BarChart extends ChartComponent{
    constructor(){
        super()
        this.state={}
        //this.bartChart=this.bartChart.bind(this);
    }

    componentDidMount(){
        console.log(this.props);        
        var cmdata=this.props.data
        var obj={type: this.props.type,
                    dataFormat: "JSON",
                    dataSource:{
                        chart:attributes.properties,
                    data:cmdata 
                }   
            } 

        this.setState({chartConfigs:obj});
    }
    render(){
        return(
                <div>
                    <ReactFC {...this.state.chartConfigs} />
                </div>
            );
    }
} 
export default BarChart;

像这样改变

    attributes(){
    var properties:{    "divLineAlpha": "0",

        attributes(){
    var properties = {    "divLineAlpha": "0",

第二，您的属性是函数范围变量，因此无法从任何地方访问。也许您可以在属性函数的末尾使用return 像这样

    attributes(){
    var properties:{    "divLineAlpha": "0",

        attributes(){
    var properties = {    "divLineAlpha": "0",

---

您可以创建一个公共类并添加可重用代码，然后将该类与其他类组件一起使用。 比如说

       dataSource:{
            chart:this.attributes(),
            data:cmdata
        }

上面的类是实现ABC和XYZ方法的父类

class Parent {

    ABC(e) {
        console.log("e", e);
    }

    XYZ() {

    }

}

上面的类是继承父类的所有方法的子类

您还可以使用React.Component扩展父类，所以当子类继承父类时，此帮助将帮助子类使用React.Component方法。像

class Child extends Parent {
    Main() {
        this.ABC("hello")
    }
}