Question

当用户点击加号时，我有一个带有加号和Modal的组件模态打开。

它看起来像这样：

import React, { useEffect, Fragment } from "react";
// ... // more imports 
const YourLeads = ({
 // 
}) => {


  return (
    <div>      
      <Fragment>
        {loadingLeads === true ? (  //  while loading data the Spinner spins 
          <Spinner />  // This is a Spinner that spins on loading data from DB
        ) : (
          <Fragment>
                    // contents to load
          </Fragment>
        )}
      </Fragment>
      <div className="">
        <AddBtn tooltipMessage="Buy Leads" hrefDescription="buy-leads" />  // Plus Sign
        <Modal />
      </div>
    </div>
  );
};

const mapStateToProps = state => ({
  ... 
});

const mapDispatchToProps = {
  ...
};

export default connect(mapStateToProps, mapDispatchToProps)(YourLeads);

上面的代码有效，并且Modal打开。

但是，当我移动以下两行时：

<AddBtn tooltipMessage="Buy Leads" hrefDescription="buy-leads" />
<Modal />

进入片段，为：

  return (
    <div>      
      <Fragment>
        {loadingLeads === true ? (  //  while loading data the Spinner spins 
          <Spinner />  // This is a Spinner that spins on loading data from DB
        ) : (
          <Fragment>
              // contents to load
              <AddBtn tooltipMessage="Buy Leads" hrefDescription="buy-leads" />
              <Modal />
          </Fragment>
        )}
      </Fragment>
      <div className="">

      </div>
    </div>
  );
};

...模态无法打开。

那是为什么？

仅供参考，这是AddBtn的代码：

import React from "react";

const AddBtn = ({ tooltipMessage, hrefDescription }) => {
  const hrefAddBtn = "#" + hrefDescription;
  return (
    <div className="fixed-action-btn">
      <a
        href={hrefAddBtn}
        data-position="left"
        data-tooltip={tooltipMessage}
        className="btn-floating btn-large blue darken-2 modal-trigger tooltipped"
      >
        <i className="large material-icons">add</i>
      </a>
    </div>
  );
};

export default AddBtn;

和模态：

import React from "react";
import BuyLeadsForm from "../forms/BuyLeadsForm";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { refreshYourLeads } from "../../actions/leads";

import "materialize-css/dist/css/materialize.min.css";
import "./credit/styles.css";
import "./YourLeadsModal.css";

const Modal = () => {
  return (
    <div>
      <div id="buy-leads" className="modal">
        <div className="modal-content">
          <h1 className="largeSpecial text-primarySpecial leads-desc">
            Buy Leads
          </h1>
          <BuyLeadsForm />
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = state => ({
  buyingLeadsResponse: state.leadReducer.buyingLeadsResponse
});

const mapDispatchToProps = {
  refreshYourLeads
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Modal));

单击加号时，React Modal无法打开

0 个答案: