父元件

import React from 'react'
import Header from './Header'
import Footer from './Footer'
import Axios from './Axios'
import FetchJsonp from './FetchJsonp'
class Father extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '父元件',
      count: 20
    }
  }
  run = () => {
    alert('我是父元件的run方法')
  }
  getData = () => {
    alert(this.state.title)
  }
  // 獲取子元件傳過來的資料
  getChildData = (result) => {
    alert(result)
    this.setState({
      title: result
    })
  }
  // 父元件自動調動子元件的方法
  getFooter = () => {
    alert(this.refs.footer.state.title)
    this.refs.footer.run()
  }
  render () {
    return (
      <div>
        {/* 父子元件傳值：
父元件給子元件傳值
1.在呼叫子元件的時候定義一個屬性  <Header msg='首頁'></Header>
2.子元件裡面 this.props.msg
說明：父元件不僅可以給子元件傳值，還可以給子元件傳方法,以及把整個父元件傳給子元件。
父元件主動獲取子元件的資料
1、呼叫子元件的時候指定ref的值   <Header ref='header'></Header>
2、通過this.refs.header  獲取整個子元件例項 dom載入完成後獲取*/}


        {/* 將title傳遞給子組建 */}
        {/* 傳遞父元件的方法 */}
        {/* 將整個父元件傳遞過去 */}
        <Header title={this.state.title} run={this.run} father={this} num={this.state.count}></Header>
        {this.state.title}
        <hr />
        <button onClick={this.getFooter}>獲取整個子元件</button>
        <Footer ref='footer'></Footer>
        <hr />
        <Axios></Axios>
        <FetchJsonp></FetchJsonp>
      </div>
    )
  }
}
export default Father
 

axios.js

import React from 'react'
import axios from 'axios'
class Axios extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list:[]
    };
  }
  getData = () => {
    // alert('ok')
    //通過axios獲取伺服器資料

    var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';   //介面後臺允許了跨域

    axios.get(api)
      .then((response) => {
        console.log(response.data.result);

        //用到this要注意this指向

        this.setState({

          list: response.data.result

        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  render () {
    return (
      <div>
        <h2>
          獲取伺服器資料
        </h2>
        <button onClick={this.getData}>獲取伺服器資料</button>
        <hr/>
        <ul>
          {
            this.state.list.map((value,key)=>{
              return (
                <li key={key}>{value.title}</li>
              )
            })
          }
          
        </ul>
      </div>
    );
  }
}

export default Axios;
 

fetchJsonp.js

import React from 'react'
import fetchJsonp from 'fetch-jsonp'
class FetchJsonp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    };
  }
  getData = () => {
    //獲取資料

    var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
    fetchJsonp(api)
      .then(function (response) {
        return response.json()
      }).then((json) => {
        // console.log(json);

        this.setState({

          list: json.result
        })

      }).catch(function (ex) {
        console.log('parsing failed', ex)
      })
  }
  render () {
    return (
      <div>
        <h2>FetchJsonp獲取伺服器jsonp介面的資料</h2>
        <hr />
        {/* 如何看一個介面支援jsonp，就是在一個介面網址後面加上callback=xxx，只要能獲取到資料，就是支援jsonp介面 */}
        <button onClick={this.getData}>獲取伺服器資料</button>
        <hr />
        <ul>
          {
            this.state.list.map((value, key) => {
              return (
                <li key={key}>{value.title}</li>
              )
            })
          }

        </ul>
      </div>
    );
  }
}

export default FetchJsonp;