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

【问题标题】：'render' is not defined no-undef in React'render' 在 React 中没有被定义为 no-undef
【发布时间】：2020-06-13 08:54:21
【问题描述】：

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

这是我使用的表单验证。

请提出任何建议：

【问题讨论】：

嗨，您的代码有两个 render() 方法，并且确定错误标识了特定的 render()。请告诉我们是哪一个。但是有两个问题需要首先解决。我怀疑在宣布课程时有错字；从 defaults 中删除“s”。其次，FormExample 是一个功能组件，它没有render() 方法。所以删除它。我认为这实际上可以解决错误。
@MwamiTovi 你检查了吗？ react-bootstrap.github.io/components/forms/#forms-validation 那么如何在我现有的组件中导入这个组件呢？
请注意，在示例代码中，您指的是最后一个 render(<.../>) 不在组件内（它是独立的）。作者正在使用最后一个 render() 向您展示如何在导入后渲染该组件。否则，您可以像任何其他 react 组件一样导入它。
@MwamiTovi 我不确定你的意思。你能给我看一些codepen或jsfiddle的例子吗？
这正是@khabir 在下面的回答中所说的。

标签： reactjs forms validation react-bootstrap

【解决方案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>
 );
}

【讨论】：

但是看到这个react-bootstrap.github.io/components/forms/#forms-validation 在功能组件中有渲染。我的代码中也有组件。如果是这样，我怎样才能在我现有的组件中实现这个表单验证？