''render'在React中未定义为no-undef

Question

我已经制作了组件。我将在我的组件中使用表格验证（react-bootstrap）。当我在组件中创建此表单时，出现如下错误：

'render'未定义为no-undef'

代码：

import react, {Component} from 'react';

export defaults class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {....}
  }

   render() {
     return(
       <div></div>
     )
   }
}

function FormExample() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

return(
  <Form noValidate validated={validated} onSubmit={handleSubmit}>
  ....
  </Form>
 );

 render(<FormExample />);
}

https://react-bootstrap.github.io/components/forms/#forms-validation

这是我使用的表单验证。

请提供任何建议：

Answer 1

您已将functional component用于FormExample，并且functional component不使用render功能，class component支持render功能。 Functional component使用与渲染类似的return语句。因此，请从FormExample中删除以下行。

render(<FormExample />);

这是移除渲染后的代码：

function FormExample() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

return(
  <Form noValidate validated={validated} onSubmit={handleSubmit}>
  ....
  </Form>
 );
}