Reactjs 单击时不显示模式（反应）

我试图得到一个模态函数，我试图镜像的模态在这里可用

模式按钮显示，但模式本身不显示。 这是我这个函数的确切代码

class App extends React.Component {
  constructor(props) {
    console.log("Props - ", props);
    super(props);
    this.state = {
      modalVisible: false
    };
    this.openModal = this.openModal.bind(this);
  }
  openModal() {
    console.log("Open modal called ", this.state.modalVisible);
    const modalVisible = !this.state.modalVisible;
    this.setState({
      modalVisible
    });
  }
  render() {
    let styles = this.state.modalVisible
      ? { display: "block" }
      : { display: "none" };
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button
          type="button"
          onClick={this.openModal}
          className="btn btn-info btn-lg"
        >
          Open Modal
        </button>
        <div
          id="myModal"
          className="modal fade in"
          role="dialog"
          style={styles}
        >
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button
                  type="button"
                  onClick={this.openModal}
                  className="close"
                >
                  &times;
                </button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div className="modal-footer">
                <button
                  onClick={this.openModal}
                  type="button"
                  className="btn btn-default"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
console.log（“Props-”，Props）；
超级（道具）；
此.state={
modalVisible:false
};
this.openModal=this.openModal.bind（this）；
}
openModal（）{
log（“打开模式调用”，this.state.modalVisible）；
const modalVisible=！this.state.modalVisible；
这是我的国家({
模态可视
});
}
render（）{
让styles=this.state.modalVisible
？{显示：“块”}
：{显示：“无”}；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
开放模态
&时代；
模态头
模态中的一些文本

接近
);
}
}

这是整个页面的代码

import React from "react";
import { Link } from "react-router-dom";
import Popup from "reactjs-popup";
import { Button, ButtonToolbar, Modal } from "react-bootstrap";
import ReactDOM from "react-dom";

import AddWorkstation from "./UpdateUserWorkStationDetailsForm";
class DisplayUserAcountDetails extends React.Component {
  constructor() {
    super();

    this.state = { AccountDetails: [] };
  }
  // sets the questions form sql into state for questions
  getItems() {
    var user = window.localStorage.getItem("User");
    if (user) {
      fetch(`/profile-work-station-detailss/${user}`)
        .then(recordset => recordset.json())
        .then(results => {
          this.setState({ AccountDetails: results.recordset });
        });
    } else {
      alert("user not  set");
    }
  }
  //when the component mounts make the sql questions the
  componentDidMount() {
    this.setState({
      AccountDetails: this.getItems()
    });
  }

  render() {
    try {
      return (
        <>
          <h3 style={{ textAlign: "center" }}> Workstations</h3>

          <button></button>
          {this.state.AccountDetails ? (
            <ul>
              <App /> // calling it here
              <Popup
                style={{ width: "300px" }}
                trigger={<button> Help?</button>}
                closeOnDocumentClick
                className={"tooltipBoundary"}
              >
                <AddWorkstation />
              </Popup>

              <Link to="/update-work-station-details">
                <button style={{ float: "right" }}>+</button>
              </Link>

              <br />
              <br />
              {this.state.AccountDetails &&
                this.state.AccountDetails.map(function(AccountDetails, index) {
                  return (
                    <div className="jumbotron">
                      <h3>Work Station</h3>

                      <li> Location: {AccountDetails.DeskLocation}</li>
                      <li>
                        ExtraInformation: {AccountDetails.ExtraInformation}
                      </li>
                      <li>
                        Primary Work Station:
                        {AccountDetails.PrimaryWorkStation}
                      </li>
                      <li> Date Added: {AccountDetails.PrimaryWorkStation}</li>

                      <li>
                        <Link to="/update-work-station-details">
                          <button>Update Account Details</button>
                        </Link>
                      </li>
                    </div>
                  );
                })}
            </ul>
          ) : (
            <ul>
              <div className="jumbotron">
                <h3>Work Station</h3>
                <li> Email: Null </li>
                <li> Name: Null </li>
                <li> Contact Number: Null </li>
                <li>
                  <Link to="/update-work-station-details">
                    <button>Update Accoudnt Details</button>
                  </Link>
                </li>
              </div>
            </ul>
          )}
        </>
      );
    } catch (e) {
      console.log(e);
    }
  }
}

export default DisplayUserAcountDetails;

class App extends React.Component {
  constructor(props) {
    console.log("Props - ", props);
    super(props);
    this.state = {
      modalVisible: false
    };
    this.openModal = this.openModal.bind(this);
  }
  openModal() {
    console.log("Open modal called ", this.state.modalVisible);
    const modalVisible = !this.state.modalVisible;
    this.setState({
      modalVisible
    });
  }
  render() {
    let styles = this.state.modalVisible
      ? { display: "block" }
      : { display: "none" };
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button
          type="button"
          onClick={this.openModal}
          className="btn btn-info btn-lg"
        >
          Open Modal
        </button>
        <div
          id="myModal"
          className="modal fade in"
          role="dialog"
          style={styles}
        >
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button
                  type="button"
                  onClick={this.openModal}
                  className="close"
                >
                  &times;
                </button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div className="modal-footer">
                <button
                  onClick={this.openModal}
                  type="button"
                  className="btn btn-default"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

从“React”导入React；
从“react router dom”导入{Link}；
从“reactjs弹出窗口”导入弹出窗口；
从“react bootstrap”导入{按钮、按钮工具栏、模式}；
从“react dom”导入react dom；
从“/UpdateUserWorkStationDetailsForm”导入AddWorkstation；
类DisplayUserAcountDetails扩展了React.Component{
构造函数（）{
超级（）；
this.state={AccountDetails:[]}；
}
//将问题从sql设置为问题的状态
getItems（）{
var user=window.localStorage.getItem（“用户”）；
如果（用户）{
获取（`/profile工作站详细信息/${user}`）
.then（recordset=>recordset.json（））
。然后（结果=>{
this.setState（{AccountDetails:results.recordset}）；
});
}否则{
警报（“未设置用户”）；
}
}
//当组件装载时，使sql问题
componentDidMount（）{
这是我的国家({
AccountDetails:this.getItems（）
});
}
render（）{
试一试{
返回(
工作站
{this.state.AccountDetails(

//叫这里
+




{this.state.AccountDetails&&
this.state.AccountDetails.map（函数（AccountDetails，index）{
返回(
工作站
位置：{AccountDetails.DeskLocation}

ExtraInformation:{AccountDetails.ExtraInformation}


主工作站：
{AccountDetails.PrimaryStation}

添加日期：{AccountDetails.PrimaryStation}

更新帐户详细信息

);
})}

) : (

工作站
电子邮件：空
名称：空
联系电话：空

更新会计明细


)}
);
}捕获（e）{
控制台日志（e）；
}
}
}
导出默认DisplayUserAcountDetails；
类应用程序扩展了React.Component{
建造师（道具）{
console.log（“Props-”，Props）；
超级（道具）；
此.state={
modalVisible:false
};
this.openModal=this.openModal.bind（this）；
}
openModal（）{
log（“打开模式调用”，this.state.modalVisible）；
const modalVisible=！this.state.modalVisible；
这是我的国家({
模态可视
});
}
render（）{
让styles=this.state.modalVisible
？{显示：“块”}
：{显示：“无”}；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
开放模态
&时代；
模态头
模态中的一些文本

接近
);
}
}

我尝试了多个例子，但这个问题仍然存在。 我有什么遗漏吗？

---

非常感谢您的帮助。

希望这对某人有所帮助这是我使用的代码，它运行良好

class Header extends React.Component {
  constructor(props) {
    super(props);

    this.handleClose = this.handleClose.bind(this);
    this.handleShow = this.handleShow.bind(this);

    this.state = {
      show: false
    };
  }

  handleClose() {
    this.setState({
      show: false
    });
  }

  handleShow() {
    this.setState({
      show: true
    });
  }

  render() {
    // console.log(this.state);

    return (
      <div className="header-container">
        <Button onClick={this.handleShow}>LOGIN</Button>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal Header</Modal.Title>
          </Modal.Header>
          <Modal.Body>Modal Body</Modal.Body>
        </Modal>
      </div>
    );
  }
}

类头扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClose=this.handleClose.bind（this）；
this.handleShow=this.handleShow.bind（this）；
此.state={
节目：假
};
}
handleClose（）{
这是我的国家({
节目：假
});
}
handleShow（）{
这是我的国家({
秀：真的
});
}
render（）{
//console.log（this.state）；
返回(
登录
模态头
模态体
);
}
}