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

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

// 调用子元素回调 num 次，来重复生成组件
function Repeat(props) {// 返回一组JSXlet 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.Geturl="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}
}