提前返回带有钩子的反应功能组件内的组件答案

【问题标题】：Early return a component inside a react functional component with hooks提前返回带有钩子的反应功能组件内的组件
【发布时间】：2020-07-29 11:20:24
【问题描述】：

const LecturesExerciseItem = props => {
  const hasMultipleVideos = hasSectionMultipleVideos(props.sectionUUID)
  if (!hasMultipleVideos) return <SectionListItem {...props} />

  // multiple videos
  const [isAccordionOpen, setIsAccordionOpen] = useState(false)
  ....
  return <h1> multiple videos </h1>
}

有条件地调用 React Hook “useState”。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks。

如何通过钩子功能组件内部的条件提前返回一些组件？

【问题讨论】：

为什么不把钩子移到 if 条件之上呢？
你有没有试过这个：return ( hasMultipleVideos ? : DO your work)
@ZohaibIjaz 提前返回，我不想拥有 if ( ) { ..... }
@HenokTesfaye 使用 kkesley 的答案。它涵盖了你想要什么
@ZohaibIjaz 是的，我正在尝试将第二个条件包装在它自己的组件中。

标签： reactjs

【解决方案1】：

你有两个选择：

在组件顶部放置挂钩
使用包装器组件，例如

const LecturesExerciseItem = props => {
  const hasMultipleVideos = hasSectionMultipleVideos(props.sectionUUID)
  if (!hasMultipleVideos) return <SectionListItem {...props} />

  // multiple videos
  ....
  return <MultipleVideos {...props}/>
}

const MultipleVideos = props => {
  const [isAccordionOpen, setIsAccordionOpen] = useState(false)
  ....
  return <h1> multiple videos </h1>
}

【讨论】：