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中继承图表组件方法和属性

Answer 1

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

class Parent {

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

    XYZ() {

    }

}

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

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

上面的类是继承Parent类的所有方法的Child类。

你也可以使用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>
        )
    }
}

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
        }

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

2 个答案: