Reactjs semantic-ui как правильно изменить тег JSX условно
У меня есть тег, который я хочу условно определить
<Table.Cell positive>{item}</Table.Cell>
Тогда как правильно это делать? Я заменил его функцией
{this.callme(item)}
и функция затем возвращает это
callme = (item) => {
let res;
if (item && item > 3)
res = <Table.Cell positive>{item}</Table.Cell>
else if (item && item < -3)
res = <Table.Cell negative>{item}</Table.Cell>
else if (item)
res = <Table.Cell>{item}</Table.Cell>
else
res = <Table.Cell>..</Table.Cell>
return res;
Но это многословно. Затем я попытался изменить внутри тег, но это не разрешено
<Table.Cell {mystate}>{item}</Table.Cell>
а тут вопрос. Как я могу изменить сам тег? Как это должно быть написано?
Ответы 2
Вы можете оптимизировать метод callme следующим образом:
callme(item) {
if (item) {
return <Table.Cell positive = {item > 3} negative = {item < -3}>{item}</Table.Cell>
} else {
return <Table.Cell>..</Table.Cell>
}
}
Я бы предложил небольшую корректировку вашего подхода, который возвращает компонент напрямую, а не назначает и возвращает через res:
callme = (item) => {
if (item && item > 3)
return (<Table.Cell positive>{item}</Table.Cell>)
else if (item && item < -3)
return (<Table.Cell negative>{item}</Table.Cell>)
else if (item)
return (<Table.Cell>{item}</Table.Cell>)
else
return (<Table.Cell>..</Table.Cell>)
}
Помимо этого изменения, ваш общий подход хорош тем, что он удобочитаем и функционально корректен.
В качестве альтернативы вы можете изменить общую структуру ваших методов, чтобы минимизировать общее количество строк, и сократить четыре оператора возврата до одного оператора возврата:
callme = (item) => {
return (item ?
<Table.Cell negative = { item < -3 } positive = { item > 3 }>{item}</Table.Cell> :
<Table.Cell>..</Table.Cell>)
}
Да, уловка в том, что любое свойство внутри JSX действительно является 'property = bool', которое я нашел в semantic-ui api. И ваш код - это именно то, что я пытался понять. Большое спасибо!
Отлично, рад, что смог помочь!
Хотя правильно проголосованный ответ действительно работает, он значительно более подробен, чем должен быть. Этот ответ гораздо короче.