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

Posted 2023-03-16

【中文标题】将道具传递给散布在对象内的函数

【英文标题】：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 上的完整示例

【参考方案1】：

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

这是你想要的语法：

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

【参考方案2】：

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

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

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