如何在 React 功能组件中呈现 if..else if...else 类型？

Question

我正在使用 React 钩子，下面是我想要实现的条件渲染，其中 sortDirection 是一个状态。我想根据 sortDirection 渲染 <i> 标签之一。我怎样才能做到这一点？

    if (sortDirection == "ascending") {
        return <i onclick={() => setSortDirection('descending')} className="fa fa-arrow-down" />
    } else if (sortDirection == "descending") {
        return <i onClick={() => setSortDirection('random')} className="fa fa-arrow-up" />
    } else {
        return <i onClick={() => setSortDirection('ascending')} className="fa fa-arrow-h" />
    }

Answer 1

您可以只创建一个单独的功能组件并将条件作为道具

const MyIComponent = (sortDirection) => {
  if (sortDirection == "ascending") {
        return <i onclick={() => setSortDirection('descending')} className="fa fa-arrow-down" />
    } else if (sortDirection == "descending") {
        return <i onClick={() => setSortDirection('random')} className="fa fa-arrow-up" />  }

    return <i onClick={() => setSortDirection('ascending')} className="fa fa-arrow-h" />
}

const MainComponent = () => <myIComponent sortDirection={sortDirection} />

Answer 2

const MyIComponent = ({sortDirection, iClassName}) => {
  return <i onclick={() => setSortDirection(sortDirection)} className={iClassName} />
}

您可以从主要组件动态传递 sortDirection 和 iClassName 作为道具，然后如果条件也可以避免。

如何在 React 功能组件中呈现 if..else if...else 类型？

How to render if..else if...else type in React functional component?

reactjs

react-hooks