Как отобразить if..else if ... else в функциональном компоненте React? - PullRequest
Новая
       5

Как отобразить if..else if ... else в функциональном компоненте React?

0 голосов
/ 08 марта 2019

Я использую React-хуки, и ниже приводится условный рендеринг, которого я хочу достичь, где sortDirection - это состояние. Я хочу сделать один из тегов <i> на основе 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" />
    } else {
        return <i onClick={() => setSortDirection('ascending')} className="fa fa-arrow-h" />
    }

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Вы можете просто создать отдельный функциональный компонент и иметь условие в качестве опоры 

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} />
0 голосов
/ 08 марта 2019

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

Вы можете динамически передавать sortDirection и iClassName из основного компонента в качестве подпорки, а затемесли условия также вы можете избежать

...