如何访问子女组件中的父组件方法,例如以下示例


//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>);
      }
    }

相关内容

  • 没有找到相关文章

最新更新