使用一个普通函数的返回值作为一个ReactJS组件

Question

我有一个普通的JavaScript函数，像这样：

// frontend/src/static/js/components/daw/index.js

export default function Daw() {
  return (
    <>
        <div>Hello world.</div>
    </>
  );
}

我试图在下面的ReactJS组件中使用上面的函数：

// frontend/src/static/js/pages/_VideoMediaPage.js

import React from 'react';
import Daw from '../components/daw';

export class Page extends React.PureComponent {
  constructor(props) {
    super(props);
  }

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

但我发现了一个错误：

未登录错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：

1. 您可能有React的不匹配版本和呈现器(例如React )
2. ，您可能正在违反Hooks
3. 的规则，您可能在同一个应用程序

中有多个React副本。

​

​

问题

在ReactJS组件中使用普通函数的正确方法是什么？

Answer 1

从技术上讲，您的功能是一个反应性功能组件。你应该像一个人一样叫它。

import React from 'react';
import Daw from '../components/daw';

export class Page extends React.PureComponent {
  constructor(props) {
    super(props);
  }

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