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

您可以像这样优化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

我建议您对直接返回组件而不是通过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>)
}

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

或者，您可以像这样修改方法的整体结构，以最大程度地减少总行数，并将四个return语句缩减为一个return语句：

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

reactjs语义UI如何有条件地正确修改JSX标签

2 个答案: