ReactionJS Semantic-UI, как правильно изменить тег JSX условно

Question

У меня есть тег, который я хочу определить условно

<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>

, а затем возник вопрос.Как я могу изменить сам тег?Как это должно быть написано?

Answer 1

Я хотел бы предложить небольшую корректировку вашего подхода, которая возвращает компонент напрямую, а не присваивать и возвращать через 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>)
}

Answer 2

Вы можете оптимизировать callme метод следующим образом:

callme(item) {
  if(item) {
    return <Table.Cell positive={item > 3} negative={item < -3}>{item}</Table.Cell>
  } else {
    return <Table.Cell>..</Table.Cell>
  }
}