javascript - 无法读取 null 的属性 'suppressHydrationWarning'

Question

我是 React 初学者，目前正在学习 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>
  )
};

此代码无效，我收到以下错误:

未捕获的类型错误:无法读取 null 的属性“suppressHydrationWarning”

如果我将此函数更改为组件:

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

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