代码展示
export default class Card extends Component {
render() {
return (
<UserInfo render={({ avator, userNickName}) => (
<Fragment>
<div className="userInfo">
<div className="imgInfo">
<div className="avator">
<img src={avator} alt="" />
</div>
</div>
<div className="user_vipInfo">
<p className="userName">
{userNickName}
</p>
</div>
</div>
</Fragment>
)}>
</UserInfo>
)
}
}
userInfo类组件的代码
export default class UserInfo extends Component {
render() {
return (
<div>
{this.props.rend(this.state)}
</div>
)
}
}
可以根据传入的内容,动态构建页面结构,比较灵活。