JSX的props.children和props本身有部分一致的特性
props.children可以傳遞任何類型的子元素

// 調(diào)用子元素回調(diào) num 次，來重復(fù)生成組件 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') )

應(yīng)用

• App.jsx

import Http from './index22/Http/index' // 將視圖渲染交給了app // 視圖需要的數(shù)據(jù)交給了Http.Get // 和Context.consumer很類似 class App extends React.Component {render() {return (<table><thead><tr><th>ID</th><th>姓名</th><th>年級(jí)</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} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的27 JSX函数子元素的应用与思考的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。