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

【问题标题】：Error when opening a modal with react-bootstrap使用 react-bootstrap 打开模式时出错
【发布时间】：2021-03-31 18:37:05
【问题描述】：

我将 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)函数与modal无关，只是删除账号并跳转到首页。另外两个打开和关闭模式的功能是阻止刷新并将状态设置为 false 和 true。

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

【问题讨论】：

标签： javascript node.js reactjs bootstrap-modal react-bootstrap

【解决方案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')
);

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

【讨论】：