React 如何导出调用同一文件中另一个函数的默认函数？

Question

我正在将 React 中的 JS 文件中的默认函数导出到 App.js。该函数调用内部的另一个函数，该函数在其相应的文件中声明但未导出。 React 如何知道从哪里获取这个函数？导出是否也导出该函数的所有依赖项？

尝试了解导出和导入的工作原理。

Answer 1

一些示例代码会有所帮助，但我猜你正在谈论这样的事情：

应用程序.js

...

return (
  <Title />
)

标题.js

...

function Heading() {
  return <h1>HelloWorld</h1>
}

export default function Title() {
  return (
    <Heading />
    <p>Some text</p>
  )
}

如果我正确理解你的问题，你想知道

App.js

如何知道

Title.js

内部的标题。这是 React 和其他框架的伟大之处之一，它们使我们能够使我们的应用程序可组合，或者换句话说，能够分解成小块。

简而言之，

App.js

从技术上来说对Heading一无所知。它所关心的是

Title.js

返回的内容。它调用

Title.js

，并将显示它返回的任何内容。在

Title.js

内，我们到达

<Heading />

标签，它获取该函数返回的内容，因为它在作用域内。这与额外的段落一起返回到

App.js

，每个人都很高兴。