Question

上述查询已经解决但有一个新问题。我使用materialize.css来使用模态和滑块。现在，每当我进入管理页面，他们都无法正常工作。我只是在滑块中显示一个灰色屏幕，模态没有被激活。 js初始化在我的index.html中，我在下面分享，管理页面包含模态和滑块代码。的index.html -

        <!DOCTYPE html>
         <html lang="en">

      <head>
       <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink- 
 to-fit=no">
   <meta name="theme-color" content="#000000">
   <!--
  manifest.json provides metadata used when your web app is added to the
  homescreen on Android. See 
 https://developers.google.com/web/fundamentals/engage-and-retain/web-app- 
  manifest/
     -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">


   <title>React App</title>
    </head>

      <body>
    <noscript>
       You need to enable JavaScript to run this app.
     </noscript>


       <div id="root">

      </div>
       <script type="text/javascript" src="https://code.jquery.com/jquery- 
    2.1.1.min.js">

    </script>

      <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">

    </script>
 <script>
$(document).ready(function () {
  // the "href " attribute of .modal-trigger must specify the modal ID that wants to be triggered
  $(".sidenav-trigger").sideNav();

  $(".carousel").carousel();
  $(".modal-trigger").leanModal();
  $('.slider').slider({ full_width: true });

})
   </script>
    </body>
   </html>



import React, { Component } from "react";
  import { Link } from "react-router-dom";
  import { withRouter } from "react-router-dom";

   import { connect } from "react-redux";
   import BillForm from "./BillForm";
  import { addBill } from "../actions/Bill";
 import AddBillerForm from "./AddBillerForm";
  import { addBiller } from "../actions/Biller";
   import Image from "../images/main.jpg";
   import Image3 from "../images/Photo3.jpg";
   import Footer from "./Footer";
   import { fetchAdmin, adminLogout } from "../actions/Admin";
    import Slider from "./Slider";

   class AdminPage extends Component {
   constructor(props) {
   super(props);
    }
    componentDidMount() {
  this.props.dispatch(fetchAdmin());
   }
   onLogout() {
this.props.dispatch(adminLogout());
this.props.history.push("/");
   }
   render() {
if (this.props.Admin.length < 1) {
  return <div>No data</div>;
}
if (this.props.Admin.length >= 1) {
  if (!this.props.Admin[0].Login) {
    return <div>Not logged in as admin</div>;
  }
  if (this.props.Admin[0].Login) {
    return (
      <div>
        <nav>
          <div className="nav-wrapper">
            <Link to="/adminpage">
              <h3 className="left brand-logo">Bill Payment</h3>
            </Link>
            <ul className="right">
              <li>
                <Link className="btn-small" to="viewbiller">
                  View Biller
                </Link>
              </li>
              <li>
                <Link className="btn-small modal-trigger" to="#modal2">
                  Add Biller
                </Link>
              </li>
              <li>
                <Link className="btn-small" to="/generatedbills">
                  Generated Bills List
                </Link>
              </li>

              <li>
                <Link className="btn-small modal-trigger" to="#modal1">
                  Generate New Bill
                </Link>
              </li>
              <li>
                <button className="btn-small btn-flat teal">
                  Top Bill Payments
                </button>
              </li>
              <li>
                <button
                  className="btn-small btn-flat white-text"
                  onClick={e => this.onLogout()}
                >
                  Logout
                </button>
              </li>
            </ul>
          </div>
        </nav>
        <div id="modal1" className="modal">
          <div className="modal-content">
            <div>
              <p>Generate New Bill for User</p>
              <BillForm
                onSubmit={(bill = {}) => {
                  this.props.dispatch(addBill(bill));
                  this.props.history.push("/adminpage");
                }}
              />
            </div>
          </div>
          <div className="modal-footer red lighten-2">
            <Link
              to="#!"
              className=" modal-action modal-close waves-effect waves-green 
    btn-flat"
            >
              Close
            </Link>
          </div>
        </div>
        <div id="modal2" className="modal">
          <div className="modal-content">
            <div className="">
              <div className="green white-text">
                <h3>Add Biller</h3>
              </div>
              <AddBillerForm
                onSubmit={(biller = {}) => {
                  this.props.dispatch(addBiller(biller));
                }}
              />
            </div>
          </div>
          <div className="modal-footer red lighten-2">
            <a
              href="#!"
              className=" modal-action modal-close waves-effect waves-green 
  btn-flat"
            >
              Close
            </a>
          </div>
        </div>
        <div>
          <Slider />
        </div>
        <Footer />
      </div>
    );
  }
 }
  }
}

   const mapStateToProps = state => {
   return { Admin: state.Admin };
  };
export default withRouter(connect(mapStateToProps)(AdminPage));

Answer 1

目前所有的return语句都在if语句中。 React总是期望渲染中的return语句。如果你的if语句都没有返回true，你就没有任何return语句。您应该在组件的末尾添加一个return语句，它返回一个空的jsx元素或一个加载图标。

尝试在渲染方法的末尾添加以下代码（应该是第127行，而不是100％确定）：return <span> ...loading </span>

渲染不会返回任何内容

1 个答案: