javascript - react 组件的导出语法

Question

大家好，我刚刚加入这个论坛，我必须说使用它非常有帮助...非常感谢。但是我想知道有什么区别:

export const Hello = (props)=>{   return<h1>Hello {props.name}</h1>;   } 

和

export default ({ name }) => <h1>Hello {name}!</h1>;

出于某种原因，第一个选项总是在我的代码中出现错误。顺便说一句，两者的组件名称都是“Hello”。

Answer 1

这里有几件事情要解包。

1。 export对比export default

当您像您的第一个示例一样将某些内容导出为命名常量时，它允许您 import它像这样:

import { Hello } from  './yourFile'

如果您将某些内容导出为默认值，您可以像这样导入它:

import Hello from './yourFile'

在第一个例子中，Hello必须与 const 的名称匹配你正在导出，在第二个，Hello是您为导入的默认值指定的名称，因此可以是您想要的任何名称(尽管为了澄清起见，惯例是保持相同)。

2。 (props)对比({name})

您在这里所做的是定义将作为参数传递给您的组件的内容。第一个例子是使用整个 props 对象，所以你需要做 props.name在您的组件中，第二个是使用对象解构来解压缩属性 name来自您的输入参数(仍然是 Prop )。

第二个的优点是，当您返回到组件时，它会更明确一点，您希望使用哪些属性，并且它可以让您在组件中更加简洁。缺点是如果您需要解压很多属性，它可能会更冗长一些。

3。 => { return xyz }对比=>

这只是语法上的差异，它们在您的示例中做同样的事情，但第二个更 slim 。第一个基本上是用花括号定义一个方法主体，它可以让您在返回组件 HTML 之前执行其他操作，例如，您可以在其中分配一些变量。第二个更简洁，但它是返回内容和花括号的简写，我个人认为如果您不需要在方法体内做任何其他事情会更好。第三种方式是写=> (<h1>Hello {name}!</h1>)这与第二个示例相同，只是带有括号!