reactjs语义ui如何有条件地正确修改JSX标记

我有一个要有条件定义的标记

<Table.Cell positive>{item}</Table.Cell>

然后函数返回

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;

callme=（项目）=>{
让我们重新来过；
如果（项目和项目>3）
res={item}
否则如果（项目和项目<-3）
res={item}
如有其他情况（项目）
res={item}
其他的
res=。。
返回res；

但这是冗长的。然后我试图修改标记内的内容，但这是不允许的

<Table.Cell {mystate}>{item}</Table.Cell>

{item}

---

还有一个问题。我如何修改标记本身？它应该如何编写？

您可以像这样优化

callme

方法：

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

callme（项目）{
如果（项目）{
返回3}负={item<-3}>{item}
}否则{
返回。。
}
}

我建议对直接返回组件的方法稍作调整，而不是通过

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=（项目）=>{
如果（项目和项目>3）
返回（{item}）
否则如果（项目和项目<-3）
返回（{item}）
如有其他情况（项目）
返回（{item}）
其他的
返回（…）
}

撇开这些变化不谈，您的一般方法是好的，因为它既可读又功能正确

或者，您可以像这样修改方法的整体结构，以最小化总行数，并将四条返回语句减少为一条返回语句：

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

callme=（项目）=>{
退货（项目？
3}>{item}：
..)
}

是的，诀窍在于JSX中的任何属性实际上都是我在语义ui api中找到的“property=bool”。你的代码正是我想弄明白的。谢谢！太好了，很高兴我能帮忙！虽然正确投票的答案确实有效，但它比需要的要详细得多。这个答案要简洁得多。

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