how to inherit chart attributes in react js

Question

    /*this is parent component*/

How to inherit parent component methods and function andattributes to child component

    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;

How to inherit the parent class property to child class property in reacting Js?i can implement fusion charts if creates three files chart component and bar chartcompnent and pie chart component i would like to inherit chartcomponent methods and properties using in barchartcomponent and piechartcomponent

Answer 1

you can create a common class and add you reusable code their and then use this class with some other class component. for example

class Parent {

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

    XYZ() {

    }

}

The above class is your parent class where you implements ABC and XYZ methods.

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

the above class is Child class that inherits all methods of Parent class.

you can also extends Parent class with React.Component, so this help when Child class inherits Parent then Child class have methods of React.Component to use. like

class Parent extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {

    }

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

    XYZ() {

    }

}


class Child extends Parent {
    render() {
        this.ABC("hello");
        return (
            <View>
                {/**
                 * add your view here
                 */}
            </View>
        )
    }
}

Answer 2

Hi first you can't use this

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

change like this

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

second your attributes is function scope variable hence can't access from anywhere maybe you can use return in end of your attributes function like this

            "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>"
    }
    console.log(properties);

    return properties;

and you can access from child component like below code

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