从 reactstrap 使用模态的警告答案

【问题标题】：Warnings with using modals from reactstrap从 reactstrap 使用模态的警告
【发布时间】：2020-09-21 09:10:24
【问题描述】：

我有一些警告：

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Transition

和

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 in ...

一个月前我还没有。

<Modal
   style={{position: "relative",
   top: "50%",
   transform: "translateY(-50%)"}}
   className="fadein-elements"
   isOpen={modal}
   toggle={toggle}
>
   <ModalHeader toggle={toggle}>Add Post</ModalHeader>
   <ModalBody>
      <Form onSubmit={onSubmit}>
         <FormGroup>
            <Label for="subject">Subject</Label>
            <Input
               type="text"
               name="subject"
               id="subject"
               placeholder="Add Subject..."
               onChange={onChange}
           />
             <Label for="content">Content</Label>
             <Input
               type="textarea"
               name="content"
               id="content"
               placeholder="Add content..."
               onChange={onChange}
            />
            <Button
               color="dark"
               style={{ marginTop: '2rem' }}
               block>
               Add Post
            </Button>
        </FormGroup>
      </Form>
   </ModalBody>
 </Modal>

应用程序运行良好，但我总是想以正确的方式清除所有警告。我假设我必须从 react-transition-group 添加过渡组件，但是我更喜欢在 CSS 中完成所有过渡和动画（对我来说，使用 react-waypoint 效果更好）。我的 React 版本是 16.13.1

最后，我有两个问题。

1) 这个警告的目的是什么，这意味着它为什么被弃用？

2) 我应该在哪里插入这个 react-group-transition 转换或者我应该如何更改这个 Modal 以清除错误？

【问题讨论】：

标签： node.js reactjs bootstrap-modal transition strict-mode

【解决方案1】：

我在 NextJS 中使用 Bootstrap 5 时遇到了同样的问题。所以我不确定这是否与您得出的相同方式，正如您没有提到的那样，但如果它相似，您可以使用相同的解决方案。

警告是由于未从 Bootstrap 添加 CSS 和 JS 包引起的。我如下编辑了我的 _app.js 文件，它成功了。

import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Script from 'next/script'

// add bootstrap css
import 'bootstrap/dist/css/bootstrap.css'

class App extends React.Component {

  render() {
    const { Component, pageProps } = this.props
    return (
      <>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />

          <Link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossOrigin="anonymous"
          />

        </Head>

        <Component {...pageProps} />

        <Script
          id = 'bootstrap'
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossOrigin="anonymous"
        />
      </>
    )
  }
}

export default App

【讨论】：