警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode

Question

我正在尝试将函数用作组件内的道具，并且该组件是另一个组件的子组件。但该功能不起作用。？我能知道为什么吗。这是我在控制台中收到的警告。

警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 被传递了一个在 StrictMode 中的 Transition 实例。相反，将 ref 直接添加到要引用的元素

这是我的代码

class Todo extends Component {

  state = {

    show: false,

    editTodo: {

      id: "",

      title: "",

      isCompleted: false

    }

  }

  handleClose = () => {

    this.setState({ show: false })

  }

  handleShow = () => {

    this.setState({ show: true })

  }

  getStyle () {

    return {

      background: '#f4f4f4',

      padding: '10px',

      borderBottom: '1px #ccc dotted',

      textDecoration: this.props.todo.isCompleted ? 'line-through'

        : 'none'

    }

  }

  //this method checks for changes in the edit field

  handleChange = (event) => {

    this.setState({ title: event.target.value })

    console.log(this.state.editTodo.title);

  }

  render () {

    //destructuring

    const { id, title } = this.props.todo;

    return (

      <div style={this.getStyle()}>

        <p>

          <input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}

          {title}

          <Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}

          <Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>

        </p>

        <Modal show={this.state.show} onHide={this.handleClose}>

          <Modal.Header closeButton>

            <Modal.Title>Edit your Task!</Modal.Title>

          </Modal.Header>

          <Modal.Body >

            <FormGroup >

              <Form.Control

                type="text"

                value={this.state.editTodo.title}

                onChange={this.handleChange}

              />

            </FormGroup>

          </Modal.Body>

          <Modal.Footer>

Answer 1

在 index.js 中更改<React.StrictMode><App /><React.StrictMode>为<App />，您将不会看到此警告。请注意，严格模式可以帮助您识别具有不安全生命周期的组件关于旧版字符串引用 API 使用的警告关于不推荐使用 findDOMNode 的警告检测意外的副作用检测遗留上下文 API删除前请参考https://reactjs.org/docs/strict-mode.html 。

Answer 2

如果您正在使用react-bootstrap变通方法中的 Modal 或 Carousel，则禁用动画。关闭它们会使警告消失。对于模态：<Modal animation={false}>&nbsp; &nbsp; <Modal.Header closeButton>&nbsp; &nbsp; &nbsp; &nbsp; <Modal.Title>Title</Modal.Title>&nbsp; &nbsp; </Modal.Header>&nbsp; &nbsp; <Modal.Body>&nbsp; &nbsp; &nbsp; &nbsp; Content&nbsp; &nbsp; </Modal.Body></Modal>对于轮播：<Carousel slide={false} fade={false}>&nbsp; &nbsp; <Carousel.Item>&nbsp; &nbsp; &nbsp; Scene 1&nbsp; &nbsp; </Carousel.Item>&nbsp; &nbsp; <Carousel.Item>&nbsp; &nbsp; &nbsp; Scene 2&nbsp; &nbsp; </Carousel.Item></Carousel>我知道一旦它没有回答 OP 问题，它会更适合作为评论，但我没有足够的声誉来这样做，也许它可以帮助某人。

Answer 3

@Ross Allen 的响应与基本问题（警告）无关，它解决了代码中的语法问题。@Ali Rehman 的响应与警告更相关，但也没有正确解决问题，它只是隐藏了问题，因此警告不再出现。如果我们不关心弃用，为什么不呢！是的，问题来自 React.StrictMode：<React.StrictMode>&nbsp; <App&nbsp;/> </React.StrictMode>StrictMode 是一种用于突出显示应用程序中潜在问题的工具。它为其后代激活额外的检查和警告，例如：识别具有不安全生命周期的组件关于旧版字符串引用 API 使用的警告关于不推荐使用 findDOMNode 的警告检测意外的副作用检测遗留上下文 API由于问题中没有完全给出错误回溯，我猜这个问题与关于已弃用 findDOMNode 使用的警告有关，因为引用了渲染方法中的元素：<Modal show={this.state.show} onHide={this.handleClose}>&nbsp; &nbsp; &nbsp; <Modal.Header closeButton>&nbsp; &nbsp; &nbsp; &nbsp; <Modal.Title>Edit your Task!</Modal.Title>&nbsp; &nbsp; &nbsp; </Modal.Header>&nbsp; &nbsp; &nbsp; <Modal.Body >&nbsp; &nbsp; &nbsp; &nbsp; <FormGroup >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Control&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.editTodo.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </FormGroup>&nbsp; &nbsp; &nbsp; </Modal.Body>&nbsp; &nbsp; &nbsp; <Modal.Footer>&nbsp; &nbsp; &nbsp; &nbsp; <Button variant="secondary" onClick={this.handleClose}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Close&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; <Button variant="primary" onClick={this.handleClose}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Save Changes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; </Modal.Footer>&nbsp; &nbsp; </Modal>当组件被渲染时，模态框也被渲染了，我们尝试改变组件的状态，组件（以及模态框）会重新渲染，在这个阶段模态框无法访问状态.解决警告的解决方案是使用React refs。Refs 有助于访问在 render 方法中创建的 DOM 节点或 React 元素。