reactjs - 条件に基づいてブロックを繰り返すのではなく、JSX ブロックを追加する

Question

私の React アプリには、条件に基づいて JSX の 1 つのブロックまたは別のブロックを返す関数があります。これは期待どおりに機能します。問題は、2 つのブロックの唯一の違いは、テキストが存在するため、2 番目のケースでは検索テキストをクリアできるようにアイコンが含まれていることです。テキストがない場合、アイコンは含まれません (したがって、他の条件)。

これが機能している間、2つのコードブロックの唯一の違いはアイコンが含まれていることなので、私のようにコードブロックを繰り返すのではなく、何らかの方法で追加できる方法があるかどうか疑問に思っています.今やっている？

これは機能です：

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