使用 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')
);

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

Answer 2

这在许多不同版本的 bootstrap/reactstrap/react/etc 中是一个持续存在的问题

删除 StrictMode 将使错误消失，是的。但也许您出于其他原因需要 StrictMode。这是一种解决方法，而不是修复方法。

第二种可能的解决方法是，如果您不关心淡入淡出，请关闭淡入淡出。

<Modal fade={false}></Modal>