利用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代码

    然而在各个小程序的编译代码不一样,导致渲染结构不一致,支付宝小程序的如下
    屏幕快照 2019-08-22 上午10.55.38.png

    而微信小程序与百度小程序的就有问题,如下:
    屏幕快照 2019-08-22 上午10.51.37.png



  • 同问这个问题,应该是一个bug



  • 去 GitHub 提个 issue 吧。



  • 这个问题解决了吗?


登录后回复