reactjs semantic-ui 如何有条件地正确修改 JSX 标签

Question

我有一个要有条件地定义的标签

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

那么，正确的做法是什么呢？我所做的是用函数

代替它

{this.callme(item)}

然后函数 returns this

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

您可以像这样优化 callme 方法：

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

Answer 2

我建议稍微调整一下您的方法，即直接 return 组件，而不是通过 res:

分配和 return

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

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

或者，您可以像这样修改方法的整体结构以尽量减少总行数，并将四个 return 语句减少到一个 return 语句：

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

reactjs semantic-ui 如何有条件地正确修改 JSX 标签

reactjs semantic-ui how to correctly modify a JSX tag conditionally

reactjs

semantic-ui

semantic-ui-react