javascript - 如何在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;

如何在React Js中将父类属性继承到子类属性？如果创建三个文件图表组件和条形图组件和饼图组件，我可以实现融合图表我想继承在barchartComponent和piechartComponent中使用的chartComponent方法和属性

Answer 1

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

class Parent {

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

    XYZ() {

    }

}

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

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

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

您还可以使用 React.Component 扩展 Parent 类，因此当 Child 类继承 Parent 然后 Child 类可以使用 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>
        )
    }
}