Блог

Работая в React, мне нужно передать реквизит из экземпляра компонента в mockFn here . Это извлеченный пример, но он использует Material UI, и я просто немного зациклился на концепции / как ее структурировать, чтобы у меня был доступ props .

В приведенном ниже примере background часть позволяет мне получать доступ к реквизитам с помощью функции arrow, но для mockFn бита, где мне нужно встроить результат, я не могу передать ему реквизит.

Я думал, что смогу сделать props => …mockFn(), но это не работает.

 const mockFn = props => ({
  color: props.color,
  //...
});

const StyledSelect = withStyles(
  {
    root: {
      // works fine
      background: props => props.bgColor,

      // how to pass props to this mockFn?
      ...mockFn()

     // does not work
    props => ...mockFn(props)
    }
  },
  {}
)(Select);

<StyledSelect bgColor="green" color="red" />
  

Полный пример на https://codesandbox.io/s/material-demo-forked-res5e?file=/demo.js:586-767

я понятия не имею о material-ui, но я знаю, что в стилизованных компонентах это работает:

 ...(props) => mockFn(props)
  

попробуйте и расскажите мне, что произошло

Вы можете получить реквизит на уровне правила (например root ), а не для отдельных свойств CSS.

Вот синтаксис, который вы хотите:

 const StyledSelect = withStyles({
  root: (props) => ({
    background: props.bgColor,
    ...mockFn(props)
  })
})(Select);