根据条件附加 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 = () => {
      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 {}}
      />
      )
    }