Блог

В примере слайдера пользовательского интерфейса Material (ссылка на codesandbox: https://codesandbox.io/s/hzhqj?file=/demo.tsx), есть возможность передать пользовательские компоненты, если вы хотите использовать другой подкомпонент для основного компонента.

       <Slider
        valueLabelDisplay="auto"
        components={{
          ValueLabel: ValueLabelComponent,
        }}
        aria-label="custom thumb label"
        defaultValue={20}
      />
 

По умолчанию пользовательский интерфейс Material передает «реквизит» ValueLabelComponent , поэтому, по сути, это:

 ValueLabel: (props) => ValueLabelComponent(props)
 

Я хотел бы передать сюда дополнительные данные, простую переменную. Пользовательский компонент уже может принимать второй параметр ( ValueLabelComponent(props, additionalData) )

Как передать дополнительные параметры пользовательскому компоненту в этой структуре?

(Примечание: я пробовал это, но, конечно, это не сработает: ValueLabel: (props, additionalData) => ValueLabelComponent(props, additionalData) )

Есть три способа сделать это:

1. Использование .bind метода

 <Slider
  valueLabelDisplay="auto"
  components={{
    ValueLabel: ValueLabelComponent.bind(null, 'test'),
  }}
  aria-label="custom thumb label"
  defaultValue={20}
/>
 

И тогда вы сможете получить доступ к переданным вами данным, таким как:

 function ValueLabelComponent(data: any, props: Props) {
  console.log(data); // contains a string 'test'

  // other work here
}
 

2. Использование функции стрелки

 <Slider
  valueLabelDisplay="auto"
  components={{
    ValueLabel: (props) => ValueLabelComponent("test", props),
  }}
  aria-label="custom thumb label"
  defaultValue={20}
/>
 

3. Визуализация и передача данных в реквизитах

 <Slider
  valueLabelDisplay="auto"
  components={{
    ValueLabel: (props) => <ValueLabelComponent {...props} testProp="test" />,
  }}
  aria-label="custom thumb label"
  defaultValue={20}
/>
 

И тогда вы сможете получить доступ к переданным вами данным, таким как:

 function ValueLabelComponent(props: Props) {
  console.log(props.testProp); // contains a string 'test'

  // other work here
}