reactjs - 'render' 在 React 中没有被定义为 no-undef

Question

我已经制作了组件。我将在我的组件中使用 forms-validation(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

这是我使用的表单验证。

请提出任何建议：

标签： reactjsformsvalidationreact-bootstrap

Answer 1

你已经用过functional component和没用过function，FormExample支持function 。使用与渲染类似的 return 语句。所以请从.functional componentrenderclass componentrenderFunctional componentFormExample

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>
 );
}