reactjs语义-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;

但这很冗长。然后我尝试修改标签 inside 的东西，但这是不允许的

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