Question

我正在使用react的基本组件模式组件-https://github.com/reactjs/react-modal

我想要实现的是，我想从已导入模式的另一个父级中打开模式。

组件CountryPopup

export default class CountryPopup extends Component {
    constructor(props) {
        super(props);
        this.state = {
          modalIsOpen: this.props.isShowModal,
          popupName: (myIsSet(this.props, "data.name")) ? this.props.data.name : 'CountryPopup',
        };
    }

    componentDidMount() {
        if (typeof window.dataLayer != "undefined" && this.props.isShowModal) {
            window.dataLayer.push({
                "event":"show popup",
                'eventCategory': 'popup',
                'eventAction': 'show',
                'eventLabel': this.state.popupName,
            });
        }
    }

    handleClick() {
        this.closeModal();
    }

    closeModal() {
       .....
    }

    afterOpenModal = () => {
        document.body.classList.add("overflow-hide");
    }

    render() {

        console.log(this.state.modalIsOpen);

        return (
            <div>
                {
                    typeof window != "undefined" &&
                    <Modal isOpen={this.state.modalIsOpen}
                        onAfterOpen={() => this.afterOpenModal()}
                        contentLabel="This is for testing"
                        ariaHideApp={false}
                        className={{
                            base: 'myReactModal dynamic-popup-myReactModal',
                            afterOpen: 'myReactModal_after-open',
                            beforeClose: 'myReactModal_before-close'
                        }}
                        overlayClassName={ {
                            base: 'myOverlayClass dynamic-popup-myOverlayClass',
                            afterOpen: 'myOverlayClass_after-open',
                            beforeClose: 'myOverlayClass_before-close'
                        }}
                    >
                        ......
                    </Modal>
                }
            </div>
        );
    }
}

另一个组件HomeView-在此组件中要打开模式窗口onclick

class HomeView extends Component {

        // onShowModal = () => {
        //     // <CountryPopup isShowModal={true}  />
        //     console.log("You clicked me");
        //     // this.setState({showModal:true})
        // }

    render () {
        var app = this.props.app;
        var data = this.props.home.data || {};
        let dfp = this.props.dfp;
        let outbrainAds = dfp.outbrain;

        let currentUrl = this.props.user.baseUrl + this.props.location.pathname.replace("/", "");


        return (
            <BaseLayout match={this.props.match} isCallWallpaper={true} fromHome={true} />

            <CountryPopup isShowModal={true}  />
            
            
            }
            
    export default HomeView;

当前，弹出窗口在加载时可见

Answer 1

不要在子组件和父组件中同时管理模态状态。但是您可以使用以下代码从父级传递模式状态。

class HomeView extends Component {
  state = {
     showModal: false
  }

  onShowModal = () => {
    this.setState({showModal: true})
  }

  render () {
    var app = this.props.app;
    var data = this.props.home.data || {};
    let dfp = this.props.dfp;
    let outbrainAds = dfp.outbrain;

    let currentUrl = this.props.user.baseUrl + this.props.location.pathname.replace("/", "");


    return (
      <BaseLayout match={this.props.match} isCallWallpaper={true} fromHome={true} />

      <CountryPopup isShowModal={this.state.showModal} />
    )
}

导出默认HomeView；

国家弹出窗口

export default class CountryPopup extends Component {
    constructor(props) {
        super(props);
        this.state = {
          modalIsOpen: props.isShowModal,
          popupName: (myIsSet(props, "data.name")) ? props.data.name : 'CountryPopup',
        };
    }

    componentDidMount() {
        if (typeof window.dataLayer != "undefined" && this.props.isShowModal) {
            window.dataLayer.push({
                "event":"show popup",
                'eventCategory': 'popup',
                'eventAction': 'show',
                'eventLabel': this.state.popupName,
            });
        }
    }

    handleClick() {
        this.closeModal();
    }

    closeModal() {
       .....
    }

    afterOpenModal = () => {
        document.body.classList.add("overflow-hide");
    }

    render() {

        console.log(this.state.modalIsOpen);

        return (
            <div>
                {
                    typeof window != "undefined" &&
                    <Modal isOpen={this.state.modalIsOpen}
                        onAfterOpen={() => this.afterOpenModal()}
                        contentLabel="This is for testing"
                        ariaHideApp={false}
                        className={{
                            base: 'myReactModal dynamic-popup-myReactModal',
                            afterOpen: 'myReactModal_after-open',
                            beforeClose: 'myReactModal_before-close'
                        }}
                        overlayClassName={ {
                            base: 'myOverlayClass dynamic-popup-myOverlayClass',
                            afterOpen: 'myOverlayClass_after-open',
                            beforeClose: 'myOverlayClass_before-close'
                        }}
                    >
                        ......
                    </Modal>
                }
            </div>
        );
    }
}

Answer 2

在这里，您正在尝试使组件“受控”和“不受控制”。您必须在组件之一或另一组件中具有状态。你不能两者都做。

通常，保持状态的是父组件。

class Parent extends Component {
  state = {
    open: false
  }

  toggleModal =() => this.setState(state => ({open: !state.open}))

  render() {
    return (<div>
      <button value="Toggle Modal" onClick={this.toggleModal}/>
      <Modal opened={this.state.open} toggleModal={this.toggleModal}/>
    </div>)
}

class Modal extends Component {
  render() {
    return (<div>
      <button value="Toggle Modal" onClick={this.props.toggleModal}/>
      {this.props.opened && <ReactModal ... />}
    </div>)
  }
}

在此示例中，两个组件中的两个按钮都将切换模式

Answer 3

您可以尝试设置PROP，然后将其传递给您的模式弹出组件：

    <CountryPopup isShowModal={this.state.showModal}  />

还要在父组件中执行与弹出框相关的操作，例如showModal(...)，hideModal(...)

在模态弹出组件中，您可以使用从父组件传递的道具showModal，还可以处理点击/切换操作。

点击其他组件后反应打开模式窗口

3 个答案: