在声明之前调用 React 中的函数式组件

编程问答 2022-05-22

问题描述

const ShowHide = () => {
   return <Item/>;
};

const Item = () => {
   return(
     //few lines of code
   );
};

这里，功能组件 ShowHide 调用组件“Item”。 item 是一个箭头函数，它没有被提升。

如何在声明之前调用 Item？

解决方法

如何在声明之前调用 Item？

这是不可能的。请阅读：javascript variables and temporal dead zone

您可以在其他文件中定义项目，并使用 ShowHide 组件导入文件。这就是你能做的。

,

与ASDFGerte评论的差不多。

以下方法无效：

const ShowHide = () => {
   return Item();
};

console.log(ShowHide());
const Item = () => {
   return 'hello world'
};

因为您试图在定义之前使用 const，并且如您所见，它不会被提升。

以下将起作用：

const ShowHide = () => {
   return Item();
};
const Item = () => {
   return 'hello world'
};
console.log(ShowHide());

因为在调用 ShowHide 并且需要 Item 时，它已经定义了。

hoistingjavascriptreactjsreactjsreactjsreactjs