//this is the parent component in ibios.js file
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class ibios extends React.Component{
constructor(){
super();
this.sate={};
this.get = this.get.bind(this);
}
get(ur,apiurl,prametars){
prametars=prepareHeaderRequest;
return axios.get(url+apiUrl,{params:prametars})
.then(function(response){
console.log(response.data);
});
}
render(){
return(
<p>hi...</p>
);
}
}
//this is the child component chart component.js file
import React from 'react';
import ibios from '../ibios/IBIOS';
import ChartComponent from './chartcomponents';
class BarChartComponent extends ChartComponent{
constructor(props){
super(props)
this.state={};
}
componentDidMount(){
//example
var url="http://localhost:9090",apiUrl="/reports",prametrs={xyz:ramki};
var retriveResponse=this.ibios.get(url,apiUrl,prametrs)
console.log(retriveResponse);
}
render(){
return(<p>hi......</p>);
}
}
//我只在ibos.js中写了一次Axios方法,以及如何继承每个组件,以及如何通过ibos.get()直接获得响应?...................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
class First extends React.Component {
first() {
alert("First")
}
render() {
return <div>sdfsdf</div>
}
}
class Second extends First {
second() {
alert('Second')
}
render() {
return <div>dsfsdfsdf</div>
}
}
class Third extends Second {
onButtonClick() {
super.second()
super.first()
}
render() {
return <button onClick={() => {this.onButtonClick()}}>Hello</button>;
}
}
ReactDOM.render(
<Third />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
You should extend 'ibios' class instead of Chart Component in your child component and use keyword 'super' to use parent methods. Otherwise you can send it as props and use it
class BarChartComponent extends Ibios{
constructor(props){
super(props)
this.state={};
}
componentDidMount(){
//example
var url="http://localhost:9090",apiUrl="/reports",prametrs={xyz:ramki};
var retriveResponse=super.get(url,apiUrl,prametrs)
console.log(retriveResponse);
}
render(){
return(<p>hi......</p>);
}
}