Как отобразить тип if..else if...else в функциональном компоненте React?
Я использую хуки 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
Вы можете просто создать отдельный функциональный компонент и иметь условие в качестве реквизита
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} />
Вместо того, чтобы создавать отдельный компонент, я просто создал const DirectionIcon = {вышеупомянутый условный рендеринг} и взамен написал <DirectionIcon /> . Поскольку в вашем комментарии вы определили myIComponent, я думаю, что первая буква должна быть заглавной, чтобы реагировать, чтобы распознать ее как компонент React. Не считая того, что все прошло хорошо. Спасибо.
const MyIComponent = ({sortDirection, iClassName}) => {
return <i onclick = {() => setSortDirection(sortDirection)} className = {iClassName} />
}
Вы можете динамически передавать sortDirection и iClassName из основного компонента в качестве реквизита, тогда, если условия также можно избежать.
const myIComponent = ({sortDirection, iClassName}) => { return <i onclick = {() => setSortDirection(sortDirection)} className = {iClassName} /> }
Хуки React не меняют ничего, что можно было бы применить к коду, который вы показываете. Этот код не будет отличаться для функционального компонента.