многократная итерация сделана для создания универсальных фильтров

Question

Я пытаюсь разработать общий компонент фильтра, который может иметь много полей для фильтрации, таких как цвет, размер, диапазон цен и т. Д., И каждое поле может иметь различные типы элементов, например, цвет может иметь флажки, переключатель и диапазон цен может иметьэлемент ввода, раскрывающийся список и т. д. Чтобы поддержать такие разные случаи, я пытался использовать этот шаблон, но здесь я должен повторять одно и то же несколько раз.

Я не уверен в этой структуре данных.Если у кого-то есть предложения, пожалуйста, помогите мне улучшить этот код, но главная проблема здесь - «многократная итерация».Как я могу улучшить этот код?

const filterParams = {
  field: {
    id     : 1, label  : 'Field', content: <FieldFilter />
  },
  employee: {
    id     : 1, label  : 'Employee', content: <Employee />
  }
}

<Filter filterParams={filterParams} activeFilterParam="field" />

const Filter = ({ filterParams, activeFilterParam }) => {
  const [show, setShow]=useState(false)
  return (
    <>
      <Button secondary icon={filter} onClick={() => setShow(!show)}>Filter</Button>
      {show && (
        <Card style={{ marginTop: 10 }}>
          <Card.Content>
            <Tabs activeTab={activeFilterParam}>
              <Tabs.List
                render={() => {
                  return (
                    Object.keys(filterParams).map(filterParam => {
                      return (
                        <Tabs.Tab key={filterParam} id={filterParam}>{filterParams[filterParam].label}</Tabs.Tab>
                      )
                    }))
                }} />
              <Tabs.Panels>
                {Object.keys(filterParams).map(filterParam => {
                  return (
                    <Tabs.Panel key={filterParam} panelId={filterParam}>{filterParams[filterParam].content}</Tabs.Panel>
                  )
                })}
              </Tabs.Panels>
            </Tabs>
          </Card.Content>
          <Card.Footer>
            <Button>
              <Button.Content style={{ marginRight: 10 }}>Save</Button.Content>
              <Button.Content secondary onClick={()=>setShow(!show)}>Cancel</Button.Content>
            </Button>
          </Card.Footer>
        </Card>
      )}
    </>
  )
}

Answer 1

Если вам не нравятся множественные вызовы Object.keys(filterParams).map, вы можете переместить цикл в начало функции компонента. Может работать что-то похожее на приведенное ниже:

const Filter = ({ filterParams, activeFilterParam }) => {
  const [show, setShow]=useState(false)

  const {tabs, panels} = Object.keys(filterParams)
    .reduce((acc, filterParam) => {
      acc.tabs.push(
        <Tabs.Tab key={filterParam} id={filterParam}>{filterParams[filterParam].label}</Tabs.Tab>
      );
      acc.panels.push(
        <Tabs.Panel key={filterParam} panelId={filterParam}>{filterParams[filterParam].content}</Tabs.Panel>
      );
      return acc;
    }, { tabs: [], panels: [] });

  return (
    ...
        <Card style={{ marginTop: 10 }}>
          <Card.Content>
            <Tabs activeTab={activeFilterParam}>
              <Tabs.List render={() => tabs} />
              <Tabs.Panels>
                {panels}
              </Tabs.Panels>
            </Tabs>
            ...
        </Card>
    ...
  )
}

Обратите внимание, что я не запускал это - скорее всего, это будет не совсем правильно, но должен дать общее представление ...