React-Redux 应用程序：'props' 未定义'

Question

我正在创建一个 React-Redux 应用程序。在添加render() 上面的内容之前，定义了props。但是，在我开始添加上述内容后，应用程序开始在读取变量时出现问题。我不知道发生了什么。

有人可以帮我理解为什么props 不再被识别吗？我真的很感激。

Login.js

import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import './login.css';

class LoginForm extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    }

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value});
  }

render() {
    return (
        <>
          <Modal show={props.modalOpen} onHide={props.handleModalOpen}>
            <Modal.Header closeButton>
              <Modal.Title>Login</Modal.Title>
            </Modal.Header>
          <Modal.Body>
              <Form>
                <Form.Group>
                  <Form.Label>Username</Form.Label>
                  <Form.Control 
                    type="text"
                    name="username"
                    className="form-control"
                  />
                </Form.Group>

                <Form.Group>
                  <Form.Label>Password</Form.Label>
                  <Form.Control 
                    type="text"
                    name="password"
                    className="form-control"
                  />
                </Form.Group>
              </Form>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="danger" type="submit" onClick={props.handleModalOpen}>
                Submit
              </Button>
              <Button variant="primary" onClick={props.handleClose}>
                Cancel
              </Button>
            </Modal.Footer>  
          </Modal>
        </>
     );
  }
}

export default LoginForm;

Navbar.js

import React from "react";
import { Link } from 'react-router-dom';
import './navbar.css';
import LoginForm from '../LoginForm/login.js';
// import SignUpModal from '../SignUpModal/signup.js';


class Navbar extends React.Component {
  state = {
     modalOpen: false
  }

  handleModalOpen = () => {
     this.setState((prevState) => {
        return {
           modalOpen: !prevState.modalOpen
        }
     })
  }

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-sm navbar-dark px-sm-5">
            <div className="container">
                <Link to='/'>
                    <div className="navbar-brand">
                        <i class="fas fa-globe fa-2x"></i>
                    </div>
                </Link>

                <ul className="navbar-nav align-items-right">
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Login
                        </a>
                    </li>
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Sign Up
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <LoginForm
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        />
        {/* <SignUpModal
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        /> */}
      </div>
    )
  }
}

export default Navbar;

Answer 1

在您的 Login.js 中，它是使用基于类的语法编写的，因此它必须是 this.props 而不是 props

<Modal show={this.props.modalOpen} onHide={this.props.handleModalOpen}>

或者，Login.js 可以重写为functional-based component，然后您可以使用props，如下所示

const Login = props => {
  return (
    <Modal show={props.modalOpen} onHide={props.handleModalOpen} />
  )
}