Reactjs react-bootstrap 模態“容器”屬性

Question

我有模態，想在容器中放入/打開，具有模態的本機屬性“ 容器”，但是一旦我指定了容器元素的類名，它就會顯示錯誤TypeError: Cannot use 'in' operator to search for 'current' in config

我創建了示例沙盒

謝謝

Answer 1

我不完全確定這是否是您的目標，但這里有一個包含在div的引導模式。

演示

代碼

應用程序.js

import { useEffect, useState, useRef } from "react";
import Config from "./Config";

export default function App() {
  // create a container ref
  const containerRef = useRef(null);
  const [show, setShow] = useState(false);
  const [isLoading, setLoading] = useState(true);

  const hideModal = () => {
    setShow(false);
  };

  useEffect(() => {
    // make sure the DOM node is assigned to the containerRef.current property
    if (isLoading && containerRef && containerRef.current) setLoading(false);
  }, [isLoading]);

  return (
    <div className="app">
      <div className="container">
        <div className="row">
          <div className="row-items col-3">
            <button onClick={() => setShow(true)}>Show</button>
            <button onClick={() => setShow(false)}>Close</button>
            <hr />
            <button>Info</button>
            <button>Tests</button>
          </div>
          <div ref={containerRef} className="modal-container row-items col-9">
            Modal should appear here...
            <Config
              ref={!isLoading ? containerRef.current : null}
              hideModal={hideModal}
              show={show}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

配置文件

import { forwardRef } from "react";
import { Modal } from "react-bootstrap";

/*
 Forwards the "containerRef" to the "Modal"

 The "Modal" component will then be inserted 
 within the "modal-container" div
*/
const Config = forwardRef(({ hideModal, show }, ref) => (
  <Modal
    container={ref}
    show={show}
    backdrop="static"
    keyboard={false}
    size="md"
    centered
  >
    <div className="analysis-config-header d-block-header">
      <i className="fas fa-info-circle align-middle text-info" />
      Before we move on...
    </div>

    <div className="analysis-config-body d-block-body">Options</div>

    <div className="analysis-config-action-buttons d-block-action-buttons">
      <hr />
      <button className="btn btn-danger btn-sm">Save</button>
      <button onClick={hideModal} className="btn btn-secondary btn-sm">
        Cancel
      </button>
    </div>
  </Modal>
));

export default Config;

索引.js

import ReactDOM from "react-dom";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

ReactDOM.render(<App />, document.getElementById("root"));

樣式文件

html,
body,
#root {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.app {
  padding: 20px;
}

/* prevents the modal content from bleeding into the container borders */
.modal-content {
  margin: auto 20px;
}

/* allows child elements to be positioned relative to the parent div */
.modal-container {
  position: relative;
}

/* positions the grey background relative to the parent div */
.modal-backdrop {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
}

/* positions the modal within the parent div, but in front of the grey 
 background */
.modal {
  position: absolute;
}

.row-items {
  border: 1px solid red;
  height: 300px;
  padding-top: 5px;
}