Javascript 在react中导出钩子函数作为组件的正确方法是什么？

我对Hooks是个新手，希望能更好地理解如何以正确的方式做事。我正在尝试将我的组件分离成一个家庭并登录。简单的例子：

Home.js

 import {SignIn} from './SignIn';

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

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

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

使用这种格式，它可以工作，但在控制台上我遇到了错误：

  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)

函数作为子函数无效。如果返回的是组件而不是
从渲染。或者你是想调用这个函数而不是返回它。
登录（在家里。js:26）

---

将钩子导出为有效的react子级的正确方法是什么？

您必须通过这样做使react认识到它是一个组件 在sign.js和Home.js中：

import React from "react";

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

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

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

export const SignIn=（）=>{
返回签名；
};
export const Home=（）=>{
返回；
};

如果你这样做。您将看到“警告：函数作为React子函数无效。如果您返回的是组件而不是渲染，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。”

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

签名

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

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

import React from 'react'

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

从“React”导入React
导出常量签名=（）=>{
返回信号
}

Home.js

 import {SignIn} from './SignIn';

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

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

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

从“React”导入React；
从“/SignIn”导入{SignIn}；
export const Home=（）=>{
返回(
)
}

在撰写本文时，我在代码中没有看到挂钩。我建议您阅读。错误在SignIn中，没有显示代码。是的，错误在SignIn中，我在Home中作为组件而不是函数导入。我的观点是，如果错误在组件中，并且您没有包含足够的源代码来演示问题，没有人能提供有意义的帮助。下面是刘磊的例子，我现在就知道了。因为我有这个{method}inside return，我把它放在表单的外部，虽然它在容器div中，但它导致了错误，所以我只是像示例中那样将它包装在它自己的div中，错误现在消失了。我没有在示例中包括它，因为我已经有了它。很抱歉，我没有键入那个主部分，但我也已经有了它，我更正了示例hmmmmm，你…….我…….无言…….我再次更新了我的答案我尝试了你的样本，但错误仍然存在，错误只出现在控制台上，即使我已经有了它。我没有把它包括在示例中。如果你返回一个函数，你会得到这个错误。你是什么意思？如果我这样做{SignIn（）}，SignIn的错误消失了，但是错误是“in div（at Home.js:25）”类似的东西我的意思是你应该检查SignIn.js的文件