Reactjs 附加JSX块而不是根据条件重复块

在我的React应用程序中，我有一个函数，根据条件返回JSX的一个块或另一个块。这正如预期的那样有效。问题是，这两个块之间的唯一区别是，在第二种情况下，包含一个图标，以允许清除搜索文本，因为文本现在已经存在。如果没有文本，则不包括图标（因此存在其他条件）

虽然这是可行的，但我想知道，因为这两个代码块之间的唯一区别是包含图标，是否有一种方法可以以某种方式附加它，而不是像我现在所做的那样重复代码块

这就是功能：

  renderIDFilter = () => {
    if (this.props.filters.id) {
      return (
        <SearchBox
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this._onFilterById}
          styles={{ iconContainer: { display: "none" }, root: { maxWidth: 300 } }}
          borderless
          underlined
          iconProps={{ 
            style: { pointerEvents: 'auto', cursor: 'pointer' },
            iconName: 'clear', onClick: () => { 
              this.clearFilter('ID');
            }
          }}
      />
      )
    } else {
      return (
        <SearchBox
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this._onFilterById}
          styles={{ iconContainer: { display: "none" }, root: { maxWidth: 300 } }}
          borderless
          underlined
      />
      )
    }
  }

renderIDFilter=（）=>{
if（this.props.filters.id）{
返回(
{ 
这个.clearFilter（'ID'）；
}
}}
/>
)
}否则{
返回(
)
}
}

尝试以下方法：

renderIDFilter = () => {
      return (
        <SearchBox
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this._onFilterById}
          styles={{ iconContainer: { display: "none" }, root: { maxWidth: 300 } }}
          borderless
          underlined
          iconProps={this.props.filters.id?{ 
            style: { pointerEvents: 'auto', cursor: 'pointer' },
            iconName: 'clear', onClick: () => { 
              this.clearFilter('ID');
            }
          }:null or undefined or {}}
      />
      )
    }
  

renderIDFilter=（）=>{
返回(
{ 
这个.clearFilter（'ID'）；
}
}：null或未定义或{}
/>
)
}

不错！为了避免语法错误，我对第二个条件做了一个简单的null检查：

：null

，这非常有效。非常感谢，@Sakshi！乐意帮忙：）