Question

我是一名初学者，目前正在学习NextJS。

我在CreateSubject.js中创建了一个简单的组件：

import React from 'react';

export default function CreateSubject(props) {
  return (
    <div>
      <div className="field">
        <label className="label">Name</label>
        <div className="control">
          <input
            ref="input"
            className="input"
            type="text"
          />
        </div>
      </div>
      <div className="field is-grouped is-grouped-right">
        <p className="control">
          <a
            className="button is-primary"
            onClick={props.onClick}
          >
            Validate
          </a>
        </p>
        <p className="control">
          <a className="button is-light">
            Cancel
          </a>
        </p>
      </div>
    </div>
  )
};

此代码不起作用，出现以下错误：

Uncaught TypeError: Cannot read property 'suppressHydrationWarning' of null

如果我将此功能更改为组件：

import React from 'react';

export default class CreateSubject extends React.Component {
  render() {
    return (
      <div>
        <div className="field">
...

运行良好。第一个代码有什么问题？

有关更多信息，我使用的是NextJS，CreateSubject的称呼如下：

import React from 'react';
import Navbar from './Navbar';
import Modal from './Modal';
import CreateSubject from './forms/CreateSubject';


let displayShowModal = false;
const createSubject = () => {
  alert('okkkk')
};
export default () => (
  <div>
    <Modal display={displayShowModal} title="Creating subject">
      <CreateSubject onClick={createSubject}/>
    </Modal>
    <Navbar/>
  </div>
);

Answer 1

问题是您使用了功能组件，因此我们应该使用useRef：https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components。另外，在将ref属性传递给元素时要谨慎。人们通常将引用的名称作为字符串传递，而不是使用{}。

您的情况应该是：

import React, {useRef} from 'react';

export default function CreateSubject(props) {
  const anyName = useRef(null);
...
  <input
    ref={anyName} // not ref="anyName"
    className="input"
    type="text"
   />
...

}

Answer 2

此问题是由于输入字段具有ref属性。删除无论如何都没用的ref属性可以解决此问题。

无法读取null的属性“ suppressHydrationWarning”

2 个答案: