fetch 是 XMLHttpRequest 的最新替代技術(shù)，它的主要方法就是 fetch() 方法。

相關(guān)資料：
fetch網(wǎng)址：阮一峰；http://javascript.ruanyifeng.com/bom/ajax.html#toc27
http://blog.csdn.net/u014410695/article/details/51017088

url ：http://blog.csdn.net/u014410695/article/details/51017088

在項(xiàng)目中使用：

home.js 是首頁(yè)， 而 NavList 是輪播圖的組件，現(xiàn)在要實(shí)現(xiàn)的就是在 home.js 中把首頁(yè)的數(shù)據(jù)拿到并拆分出來(lái)，把輪播圖這一塊的數(shù)據(jù)傳遞給 NavList 組件， NavList 拿到數(shù)據(jù)并渲染。

1、home.js 拆分?jǐn)?shù)據(jù)
一般數(shù)據(jù)拆分是寫(xiě)在 componentDidMount() 中，該方法是在 render() 方法成功調(diào)用并且真實(shí)的 dom 已經(jīng)被渲染后進(jìn)行。

componentDidMount() {
   /* var myHeaders = new Header();
    myHeaders.append("Content-Type", "text/plain");
    myHeaders.append("Content-Length", context.length.toString());
    myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

    var myInit = {
        method: 'POST',
        headers: myHeaders,
        mode: 'cors',
        cache: 'default'
    };  */   // 頭部信息，解決兼容性問(wèn)題

   var url = "................................."; // 接口url
   fetch(url).then(
        function (res) {
            if (res.ok) {
                return res.json()
            } else {
                {this.LogError(res)}
            }
        }
    ).then(function (json) {
        if (json.code == "200") {  // 判斷請(qǐng)求是否正確
            return json.datas
        }
    }).then(function (datas) {
        for (var i=0; i<datas.length; i++) {
            if (datas[i].type == "adv_list") {  // 取出輪播圖的數(shù)據(jù)
                return datas[i].ietm_data
            }
        }
    }).then( (e) => {
       console.log("props111=====" + e );
        this.setState({  // setState 將數(shù)據(jù)塞在 state 中以便在組件間進(jìn)行數(shù)據(jù)傳遞
            slideList:e
        });

    });
}
  LogError(res) {
      console.error('服務(wù)器繁忙,請(qǐng)稍后重試; \r\nCode:' + res.status)
  }

2、數(shù)據(jù)傳遞

home.js 在 constructor 中初始化 slideList 數(shù)組，以便后續(xù)來(lái)承載需要傳輸給子組件的數(shù)據(jù)。

constructor(){
    super();
    this.state = {
        slideList:[],  // 初始化 slideList［］
    }
}

前面在第一步也講到了，把數(shù)據(jù) setState 到 slideList 中。

render() {
  return (
    <div>
        <Nav />
        <NavList  datas={this.state.slideList} />  // 在 render 數(shù)組的時(shí)候?qū)?shù)據(jù)傳輸進(jìn)去
        <GridView />
    </div>
  );
}

3、子組件接收數(shù)據(jù)并渲染組件

NavList 中 繼承父組件的 props：

constructor(props) {
    super(props);
    console.log("props=====" + props);  // 這里打印時(shí)已經(jīng)確定數(shù)據(jù)傳輸過(guò)來(lái)了
    this.state = {   // 無(wú)關(guān)
        current: 1,
    };
};

渲染組件，我這里用的是 antd mobile 的輪播圖：

render() {
    const settings = {
        //是否顯示面板指示器
        dots: true,
        //是否自動(dòng)切換
        autoplay: true,
        //是否循環(huán)播放
        infinite: true,
        //手動(dòng)設(shè)置當(dāng)前顯示的索引
        selectedIndex: this.state.current,
        beforeChange: this.beforeSlide,
        afterChange: this.slideTo,
    };

    return (
        <div>
            <Carousel {...settings}>
                {
                    this.props.datas.map(function(el){  // map遍歷 渲染
                        return <Flex
                            justify="center"
                            className={styles.flex}
                        >
                            <img className={styles.image} src={el.image} />
                        </Flex>
                    })
                }

            </Carousel>
            <WhiteSpace size="1g" />
        </div>
    );
}

ok，動(dòng)態(tài)取值的輪播圖就已經(jīng)完成了。