27 JSX函数子元素的应用与思考

JSX的props.children和props本身有部分一致的特性
props.children可以传递任何类型的子元素

// 调用子元素回调 num 次，来重复生成组件
function Repeat(props) {
    // 返回一组JSX
    let items = [];
    for (let i = 0; i < props.num; i++) {
        items.push(props.children(i));
    }
    return <div>{items}</div>;
}

function List() {
    return (
        <Repeat num={10}>
            {(index) => <div key={index}>This is item {index} in the list</div>}
        </Repeat>
    );
}
class App extends React.Component {
    render() {
        return (
            <>
                <List />
            </>
        )
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('app')
)

应用

• App.jsx

import Http from './index22/Http/index'
// 将视图渲染交给了app
// 视图需要的数据交给了Http.Get 
// 和Context.consumer很类似
class App extends React.Component {
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>年级</th>
                    </tr>
                </thead>
                <tbody>
                    <Http.Get
                        url="http://localhost:8080/getStudents"
                        loading={
                            <tr>
                                <td colSpan="3">正在加载中...</td>
                            </tr>
                        }
                    >
                        {
                            (data) => {
                                return data.map(item => (
                                    <tr key={item.id}>
                                        <td>{item.id}</td>
                                        <td>{item.name}</td>
                                        <td>{item.grade}</td>
                                    </tr>
                                ))
                            }
                        }
                    </Http.Get>
                </tbody>
            </table>
        )
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('app')
)

• index.jsx

import Get from './Get'
export default {
    Get
}

• Get.jsx

export default class Get extends React.Component {
    async componentDidMount() {
        const result = await axios(this.props.url)
        console.log(result)
        this.setState({
            data: result.data
        }, () => {
            setTimeout(() => {
                this.setState({
                    component: this.props.children(this.state.data)
                })
            }, 1000)
        })
    }
    state = {
        data: [],
        component: this.props.loading || 'loading...'
    }
    render() {
        return this.state.component
    }
}