1

在我的 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
      />
      )
    }
  }
4

1 回答 1

2

尝试这样的事情：

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 {}}
      />
      )
    }
于 2021-01-22T15:49:36.307 回答