警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 传递了一个在 StrictMode 内的 Transition 实例

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>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
                          </Button>
            <Button variant="primary" onClick={this.handleClose}>
              Save Changes
                          </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )

  }
}

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}>
    <Modal.Header closeButton>
        <Modal.Title>Title</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        Content
    </Modal.Body>
</Modal>

对于轮播：

<Carousel slide={false} fade={false}>
    <Carousel.Item>
      Scene 1
    </Carousel.Item>
    <Carousel.Item>
      Scene 2
    </Carousel.Item>
</Carousel>

我知道一旦它不回答 OP 问题，它更适合作为评论，但我没有足够的声誉来这样做，也许它可以帮助某人。

Answer 3

@Ross Allen 的响应与基本问题（警告）无关，它解决了代码中的语法问题。

@Ali Rehman 的回应更多地与警告有关，但它也没有正确解决问题，它只是隐藏了问题，使警告不再出现.. 如果我们不关心弃用，为什么不呢！

是的，问题来自 React.StrictMode：

<React.StrictMode>
 <App />
</React.StrictMode>

StrictMode 是一种用于突出应用程序中潜在问题的工具。它会为其后代激活额外的检查和警告，例如：

• 识别生命周期不安全的组件
• 关于旧字符串引用 API 使用的警告
• 有关已弃用的 findDOMNode 用法的警告
• 检测意外的副作用
• 检测遗留上下文 API

由于问题中没有完全给出错误回溯，我猜这个问题与关于已弃用的 findDOMNode 用法的警告有关，因为在渲染方法中引用了元素：

<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>
        <Button variant="secondary" onClick={this.handleClose}>
          Close
                      </Button>
        <Button variant="primary" onClick={this.handleClose}>
          Save Changes
                      </Button>
      </Modal.Footer>
    </Modal>

当组件被渲染时，模态也被渲染了，我们尝试改变组件的状态，组件（以及模态）将重新渲染，在这个阶段模态无法访问状态.

解决警告的解决方案是使用React refs。Refs 有助于访问在 render 方法中创建的 DOM 节点或 React 元素。

Answer 4

该setState电话看起来像它被写入到错误的地方。确保它在editTodo对象上：

    handleChange = (event) => {
        this.setState(state => ({
          editTodo: {
            ...state.editTodo,
            title: event.target.value,
          },
        }));
    }

Answer 5

在React Semantic UI中，这是一个已知问题，他们的大多数组件仍在使用findDOMNode()。这已在Semantic UI React v3 PR #4233中得到修复，所有这些组件都将更新为使用React.forwardRef().

起初我以为我做错了什么，并花了很长时间进行调查，结果发现这是一个已知问题。

PR #4233的一个有趣的边缘情况可能会有所帮助，那就是除了组件之外的所有组件都可以转换为功能组件<Dropdown>。为此，他们使用函数组件包装组件forwardRef，然后将innerRefprop 传递给类组件（通过PR commit diff）：

const Dropdown = React.forwardRef((props, ref) => {
  return <DropdownInner {...props} innerRef={ref} />
})

class DropdownInner extends Component {
  searchRef = createRef()
  sizerRef = createRef()
  ref = createRef()
  ...
}

Answer 6

我不确定它在使用 material-ui 库时是否有帮助，但在许多情况下这会有所帮助：

const nodeRef = React.useRef(null);
return <div>
  <CSSTransition ... nodeRef={nodeRef}>
    <div ref={nodeRef}> ... </div>
  </CSSTransition>
</div>

Answer 7

这是MaterialUI库的问题，在新的MaterialUI v5正式发布之前，这里有一个临时解决方案