2018-08-22 23:34:36 +08:00
---
2018-09-02 15:46:49 +08:00
order: 3
2018-08-22 23:34:36 +08:00
title:
zh-CN: 包含子组件
en-US: Contains sub component
---
## zh-CN
加载占位图包含子组件。
## en-US
Skeleton contains sub component.
````jsx
import { Skeleton, Button } from 'antd';
class Demo extends React.Component {
state = {
loading: false,
};
showSkeleton = () => {
this.setState({ loading: true });
setTimeout(() => {
this.setState({ loading: false });
}, 3000);
};
render() {
return (
< div className = "article" >
< Skeleton loading = {this.state.loading} >
< div >
< h4 > Ant Design, a design language< / h4 >
< p > We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.< / p >
< / div >
< / Skeleton >
< Button onClick = {this.showSkeleton} disabled = {this.state.loading} >
Show Skeleton
< / Button >
< / div >
);
}
}
ReactDOM.render(< Demo / > , mountNode);
````
< style >
.article h4 {
margin-bottom: 16px;
}
.article button {
margin-top: 16px;
}
< / style >