在 React 中使用 props 的两种不同方式

Question

关于这个我找不到任何好的解释。

所以您可以通过以下方式使用道具，

1.

export default function AppHeader({ somethingImportant }) {
  return <div>{somethingImportant}</div>
  
}

或

2.

export default function AppHeader(props) {
  const { somethingImportant } = props

  return <div>{somethingImportant}</div>
  
}

我不太清楚在子组件中使用道具的第一种方式和第二种方式之间的区别。

是否必须让组件在其他父组件中重用？

提前谢谢大家！

Answer 1

它们几乎相同，但在第一种方法中，当您使用 AppHeader 组件时，您的 ide 可以提示您该组件需要一些重要的属性。（如果您使用的是 webStorm 或 phpStorm，您可以按 ctl + space 您使用该组件的地方并查看此道具)

Two different ways of using props in React