使用 react-bootstrap 打开模式时出错

Question

我正在使用 reactJS 17.0.1 和 react-bootstrap 1.5.1 和 bootstrap 4.6.0

我有一个模式，我想用 openModal 函数打开，该函数将状态设置为 showModal true，但是当我打开模式时，我在控制台中收到此错误：

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at div
    at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:69820:30)
    at Fade (http://localhost:3000/static/js/vendors~main.chunk.js:27003:24)
    at BackdropTransition
    at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:65869:24)
    at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:28429:23)
    at div
    at UserPage (http://localhost:3000/static/js/main.chunk.js:6005:5)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:68877:29)
    at div
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:26367:23)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:68512:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:68132:35)
    at App (http://localhost:3000/static/js/main.chunk.js:78:1)

在网上搜索我发现很多人都有这个错误，但是无论是在构建模态还是在使用 react-bootstrap 时都没有人遇到这个错误。这是我为模态

编写的代码

                 <Modal
                    onHide={this.closeModal}
                    backdrop="static"
                    keyboard={false}
                    show={this.state.show}>
                    <Modal.Header closeButton>
                        <Modal.Title>Delete account</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Are you sure you want to delete this account?</p>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={(e) => this.closeModal(e)} variant="secondary">Close</Button>
                        <Button onClick={(e) => this.onDeleteHandler(e)} variant="primary">Yes</Button>
                    </Modal.Footer>
                </Modal>

函数(e) => this.onDeleteHandler(e)它与模式无关，只是删除帐户并重定向到主页。另外两个打开和关闭模式的功能是防止刷新并将状态设置为 false 和 true。

编辑：我改变了主体的样式，我也更新了模态代码

Answer 1

5天后我发现了。如果您使用的是 create-react-app，您将在项目的根文件夹中有一个 index.js，在这里您会看到类似这样的内容：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

您需要删除 <React.StrictMode> 开始和结束标记并放置一个 div，如下所示：

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

这是我的解决方法，如果有人有其他方法请评论这个答案！

使用 react-bootstrap 打开模式时出错

Error when opening a modal with react-bootstrap

javascript

node.js

bootstrap-modal

reactjs

react-bootstrap