利用Children与组合兼容小程序slot槽机制,微信小程序、百度小程序渲染有问题
-
//Modal.js class Modal extends Component { static defaultProps = { maskTapAble: false, modalVisible: false } //配置全局样式覆盖 static options = { addGlobalClass: true } constructor(props) { super(props) } componentDidMount() { let { modalVisible } = this.props this.setState({ modalVisible: modalVisible }) } handleClose = (maskTapAble, e) => { if (maskTapAble) { } } render() { let { maskTapAble, modalVisible, className } = this.props return ( <CoverView className={classnames("modal-outer",`${className}`, { "visible": modalVisible })}> <CoverView className="modal-mask" onClick={this.handleClose.bind(this, maskTapAble)} ></CoverView> <CoverView className="modal-content"> {this.props.children} </CoverView> </CoverView> ) } } export default Modal
此为外壳代码,
//paySelect.js class PaySelect extends Component { static defaultProps = { visible: false } render() { let { visible, onCancel } = this.props return ( <Modal modalVisible={visible} className="pay-select"> <CoverView className="pay-title"> <CoverView className="cancel" onClick={onCancel}>取消</CoverView> <CoverView className="pay-title-text">选择支付方式</CoverView> </CoverView> <CoverView className={classnames("pay-type-item")}> 企业支付 </CoverView> <CoverView className={classnames("pay-type-item")}> 支付宝 </CoverView> <CoverView className={classnames("pay-type-item")}> 微信支付 </CoverView> <CoverView className={classnames("pay-type-item")}> 百度支付 </CoverView> </Modal> ) } } export default PaySelect
此为children代码
然而在各个小程序的编译代码不一样,导致渲染结构不一致,支付宝小程序的如下
而微信小程序与百度小程序的就有问题,如下:
-
同问这个问题,应该是一个bug
-
去 GitHub 提个 issue 吧。
-
这个问题解决了吗?