react的render props可以根据传入的数据动态构建

代码展示

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

可以根据传入的内容，动态构建页面结构，比较灵活。