Передайте реквизиты функции, которая распространяется внутри объекта

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

В приведенном ниже примере часть background позволяет мне получить доступ к реквизитам с помощью функции стрелки, но для бита 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


reactjs javascript material-ui emotion styled-components
person Lucas Arundell    schedule 18.09.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

person chawki challadia    schedule 18.09.2020

arrow_upward
0
arrow_downward

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

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

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

Редактировать демо-материал (разветвленный)

person Ryan Cogswell    schedule 19.09.2020