Question

我是Hooks的新手，并且想更好地了解如何正确地做事。我正在尝试将我的组件分为Home和SignIn。简单的例子：

Home.js

 import {SignIn} from './SignIn';

 export const Home = () => {
    return (
       <div>
          <SignIn />
       </div>
    )
 }

SignIn.js

 export const SignIn = () => {
   //sign in functionality
  return (
     //sign in forms
   )
  }

使用这种格式可以工作，但是在控制台上出现错误：

  Functions are not valid as a React child. This may happen if you return a Component instead of 
  <Component /> from render. Or maybe you meant to call this function rather than return it.
  
  in SignIn (at Home.js:26)

将钩子导出为有效的反应孩子的正确方法是什么？

Answer 1

如果您这样做。您将得到以下警告：“警告：函数作为React子代无效。如果您返回Component而不是从render返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。”

const method = () => {}

...
return (
    <div>
      {method}
    </div>
  );

已更改

const method = () => {}

...
return (
    <div>
      {method()}
    </div>
  );

在您的SignIn.js中

export const SignIn = () => {
  return (
   // the problem is here
   // do like that {method()}
  );
};

============更新=============

SignIn.js

import React from 'react'

export const SignIn = () => {
  return <div>SignIn</div>
}

Home.js

import React from 'react';
import {SignIn} from './SignIn';

export const Home = () => {
    return (
       <div>
          <SignIn />
       </div>
    )
 }

Answer 2

您必须通过这样做使React识别它是一个组件在您的SignIn.js和Home.js中：

import React from "react";

已更新，请尝试以下操作：

export const SignIn = () => {
  return <div>SignIN</div>;
};

export const Home = () => {
  return <SignIn />;
};

将Hooks函数作为react中的组件导出的正确方法是什么？

2 个答案: