React学习笔记【14】

第十六节

ajax

npm install axios

本节代码

import React from 'react'
import axios from 'axios'

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            newsData: null
        }
    }
    async componentDidMount() {
        let result = await axios.get("https://i.snssdk.com/toutiao/normandy/pneumonia_trending/city_dist/")
        console.log(result.data);
    }
    render() {
        return (
            <div>
                首页
            </div>
        )
    }
}

---

第十七节

React插槽

在组件中写入内容，这些内容是可以被识别和控制的。React需要自己开发支持插槽功能。

原理

组件中写入的HTML可以传入到props上
组件中的HTML内容直接全部插入
使用this.props.children获取

根据组件中HTML内容的不同，插入的位置不同

本节代码

import React from 'react';
import ReactDOM from 'react-dom';

class ParentCom extends React.Component {
    constructor(props) {
        super(props)
        console.log(props);
        console.log(this.props.children[0].props);
    }
    render() {
        return (
            <div>
                <h1>组件插槽</h1>
                {this.props.children}
                <ChildCom>
                    <h1 data-position="header">这是放置到头部的内容</h1>
                    <h2 data-position="body">这是内容部分</h2>
                    <h2 data-position="footer">这是尾部内容</h2>
                </ChildCom>
            </div>
        )
    }
}
class ChildCom extends React.Component {
    render() {
        console.log(this.props.children);
        let headerCom, bodyCom, footerCom;
        this.props.children.forEach((item, index) => {
            if (item.props['data-position'] === "header") {
                headerCom = item;
            } else if (item.props['data-position'] === "body") {
                bodyCom = item;
            } else {
                footerCom = item;
            }
        })
        return (
            <div>
                <div className="header">
                    {headerCom}
                </div>
                <div className="body">
                    {bodyCom}
                </div>
                <div>
                    {footerCom}
                </div>
            </div>
        )
    }
}

class RootCom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: [0, 1, 2]
        }
    }
    render() {
        return (
            <div>
                <ParentCom>
                    <h2 data-name="a" data-index={this.state.arr[0]}>子组件1</h2>
                    <h2 data-name="b" data-index={this.state.arr[1]}>子组件2</h2>
                    <h2 data-name="c" data-index={this.state.arr[2]}>子组件3</h2>
                </ParentCom>
            </div>
        )
    }
}

ReactDOM.render(
    <RootCom />
    ,
    document.getElementById('root')
);