附加 JSX 块而不是基于条件重复块

Question

在我的 React 应用程序中，我有一个函数 returns 一个 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
      />
      )
    }
  }

Answer 1

尝试这样的事情：

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

附加 JSX 块而不是基于条件重复块

Appending JSX Block Rather Than Repeating Block Based on Condition

reactjs

fluentui-react