致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第十六节
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')
);