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}
}
)
)
