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

Question

    /*this is parent 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;

如何在反应Js中将父类属性继承到子类属性?如果创建了三个文件图表组件和条形图组件和饼图组件，我可以实现熔合图，我想继承在barchartcomponent和piechartcomponent中使用的chartcomponent方法和属性

Answer 1

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

class Parent {

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

    XYZ() {

    }

}

上面的类是您的父类，您可以在其中实现ABC和XYZ方法。

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

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

你也可以用React.Component扩展父类，这样当子类继承父类时，子类就有了React.Component的方法可以使用。喜欢

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

嗨，首先，你不能使用这个

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

就像这样改变

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

其次，您的属性是函数作用域变量，因此不能从任何地方访问，也许您可以在属性函数的末尾使用return，如下所示

            "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;

你可以像下面的代码一样从子组件中访问

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