Css 模态未显示在react with react引导中

我正在尝试创建一个模式，以便在单击

NavBar.Item

login/register时弹出一个登录/注册窗口

我的模态定义如下：

import React from "react";
import '../assets/styles/GenericTheme.css'
import { Modal } from "react-bootstrap";

class LoginRegisterModal extends React.Component {  
    constructor(props, context) {
        super(props);
        this.state = {show: false};
    }

    open = () => {
        this.setState({show: true});
    }

    close = () => {
        this.setState({show: false});
    }

    render() {  
        return (         
     //   <Modal show={this.state.show} onHide={this.close} dialogClassName="popup-inner">
        <Modal show={this.state.show} fade={false} style={{width: "200px", display: "block"}}>
            <Modal.Body>test</Modal.Body>
        </Modal>
        );  
    }  
}  

export default LoginRegisterModal;

import React, {}  from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import SearchForm from '../HeaderFooter/SearchForm';
import SiteLogo from '../../assets/images/village-logo.svg';
import '../../assets/styles/HeaderTheme.css'
import LoginRegisterModal from '../LoginRegisterModal';


class NavHeader extends React.Component {

    constructor(props, context) {
        super(props);
        this.state = {showLogin: false};
    }

    openLogin = () => {
        this.setState({showLogin: !this.state.showLogin});
    }

    render() {
        return (
            <div>
            <Navbar className="village-header" width="100" expand="lg">
                <Navbar.Brand href="/">
                    <img
                        src= { SiteLogo }
                        width="214"
                        height="28"
                        className="d-inline-block align-top"
                        alt="Village"
                    />
                </Navbar.Brand>
                <SearchForm />
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto village-header">
                    <Nav.Link href="/discover">Discover</Nav.Link>
                    <Nav.Link href="/create">Create</Nav.Link>
                    <Nav.Link href="/howitworks">How it Works</Nav.Link>
                    <Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>Login/Register</Nav.Link>
                    <NavDropdown title="Profile" id="basic-nav-dropdown">
                        <NavDropdown.Item>Firstname LastName</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="/profile">Profile</NavDropdown.Item>
                        <NavDropdown.Item href="/messages">Messages</NavDropdown.Item>
                        <NavDropdown.Item href="/settings">Settings</NavDropdown.Item>
                        <NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
                    </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <LoginRegisterModal show={this.state.showLogin} />
            </div>
            );
        }
}

export default NavHeader;

从“React”导入React；
导入“../assets/styles/GenericTheme.css”
从“react bootstrap”导入{Modal}；
类LoginRegisterModel扩展React.Component{
构造函数（道具、上下文）{
超级（道具）；
this.state={show:false}；
}
开放=（）=>{
this.setState（{show:true}）；
}
关闭=（）=>{
this.setState（{show:false}）；
}
render（）{
报税表（
//   
测验
);  
}  
}  
导出默认LoginRegisterModel；

在导航栏中，我添加了对模态的引用，如下所示：

import React from "react";
import '../assets/styles/GenericTheme.css'
import { Modal } from "react-bootstrap";

class LoginRegisterModal extends React.Component {  
    constructor(props, context) {
        super(props);
        this.state = {show: false};
    }

    open = () => {
        this.setState({show: true});
    }

    close = () => {
        this.setState({show: false});
    }

    render() {  
        return (         
     //   <Modal show={this.state.show} onHide={this.close} dialogClassName="popup-inner">
        <Modal show={this.state.show} fade={false} style={{width: "200px", display: "block"}}>
            <Modal.Body>test</Modal.Body>
        </Modal>
        );  
    }  
}  

export default LoginRegisterModal;

import React, {}  from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import SearchForm from '../HeaderFooter/SearchForm';
import SiteLogo from '../../assets/images/village-logo.svg';
import '../../assets/styles/HeaderTheme.css'
import LoginRegisterModal from '../LoginRegisterModal';


class NavHeader extends React.Component {

    constructor(props, context) {
        super(props);
        this.state = {showLogin: false};
    }

    openLogin = () => {
        this.setState({showLogin: !this.state.showLogin});
    }

    render() {
        return (
            <div>
            <Navbar className="village-header" width="100" expand="lg">
                <Navbar.Brand href="/">
                    <img
                        src= { SiteLogo }
                        width="214"
                        height="28"
                        className="d-inline-block align-top"
                        alt="Village"
                    />
                </Navbar.Brand>
                <SearchForm />
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto village-header">
                    <Nav.Link href="/discover">Discover</Nav.Link>
                    <Nav.Link href="/create">Create</Nav.Link>
                    <Nav.Link href="/howitworks">How it Works</Nav.Link>
                    <Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>Login/Register</Nav.Link>
                    <NavDropdown title="Profile" id="basic-nav-dropdown">
                        <NavDropdown.Item>Firstname LastName</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="/profile">Profile</NavDropdown.Item>
                        <NavDropdown.Item href="/messages">Messages</NavDropdown.Item>
                        <NavDropdown.Item href="/settings">Settings</NavDropdown.Item>
                        <NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
                    </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <LoginRegisterModal show={this.state.showLogin} />
            </div>
            );
        }
}

export default NavHeader;

import React，{}来自'React'；
从“react bootstrap”导入{Navbar，Nav，NavDropdown}；
从“../HeaderFooter/SearchForm”导入SearchForm；
从“../../assets/images/village logo.svg”导入SiteLogo；
导入“../assets/styles/HeaderTheme.css”
从“../LoginRegisterModel”导入LoginRegisterModel；
类NavHeader扩展了React.Component{
构造函数（道具、上下文）{
超级（道具）；
this.state={showLogin:false}；
}
openLogin=（）=>{
this.setState（{showLogin:！this.state.showLogin}）；
}
render（）{
返回(
发现
创造
工作原理
登录/注册
姓
轮廓
信息
设置
注销
);
}
}
导出默认导航头；

当我单击登录/注册时：

登录/注册

不会发生任何情况，不会显示弹出窗口或模式。我还在导航栏下面添加了一行

但没有任何变化。我还尝试添加一个

className

，并强制将

z-layer

设置为2，但效果并不理想

有什么想法吗？

---

关于

您的模态组件没有“监听”任何传递的道具，即从

NavHeader

传递的

show

道具。实现

componentdiddupdate

lifecycle函数以检查

show

prop值的更改是一个快速的解决方案。如果安装时显示打开，也可使用

show

prop值设置初始状态

class LoginRegisterModal extends React.Component {  
  constructor(props, context) {
    super(props);
    this.state = {
      show: props.show, // use the initial show value
    };
  }

  open = () => {
    this.setState({ show: true });
  }

  close = () => {
    this.setState({ show: false });
  }

  componentDidUpdate(prevProps) {
    const { show } = this.props;
    if (prevProps.show !== show) {
      if (show) {
        open(); // open if parent says to
      } else {
        close(); // close if parent says to
      }
    }
  }

  render() {  
    return (         
    //   <Modal
    //     show={this.state.show}
    //     onHide={this.close}
    //     dialogClassName="popup-inner"
    //   >
      <Modal
        show={this.state.show}
        fade={false}
        style={{width: "200px", display: "block"}}
      >
        <Modal.Body>test</Modal.Body>
      </Modal>
    );  
  }  
}

父级使用的

<LoginRegisterModal
  show={this.state.showLogin}
  onHide={() => this.setState({ showLogin: false })}
/>

---

谢谢。你能给我一个受控元件的例子吗？我是新手react@Seb当然我在回答的末尾添加了一个简单的示例。我的代码正在崩溃，而且，我看不到对componentDidUpdate的调用在哪里完成。这是我得到的错误：“超过了最大更新深度。”。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。“@Seb您能更具体地说明什么是崩溃吗？哪个组件正在循环状态更新？