将道具传递给散布在对象内的函数答案

【问题标题】：Pass props to function that is spread within an object将道具传递给散布在对象内的函数
【发布时间】：2021-01-05 20:14:26
【问题描述】：

在 React 中工作，我需要将 props 从实例化组件传递到 mockFn 这里。这是一个提取的示例，但它使用的是 Material UI，我只是对概念/如何构建它有点停留，所以我可以访问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 上的完整示例

【问题讨论】：

标签： javascript reactjs material-ui styled-components emotion

【解决方案1】：

您可以在规则级别（例如root）而不是单个 CSS 属性获取道具。

这是你想要的语法：

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

【讨论】：

【解决方案2】：

我对material-ui一无所知，但我知道在样式化的组件中这是可行的：

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

试一试，告诉我发生了什么

【讨论】：