方法参数：解构+保留原始参数（ReactJS组件）[重复]答案

【问题标题】：Method parameter: destructuring + keeping original parameter (ReactJS component) [duplicate]方法参数：解构+保留原始参数（ReactJS组件）[重复]
【发布时间】：2023-03-28 13:54:01
【问题描述】：

有没有什么方法可以实现方法参数的解构，也可以获取方法参数。

在具有无状态组件的 React 应用程序的上下文中，我希望能够替换

const MyComponent = (props) => {
  const {prop1, prop2} = props;
  return (
    <div className={prop1 + '-' + prop2}>
      <Child {...props}/>
    </div>
  ) 
}

使用更简洁的语法，例如

const MyComponent = (props: {prop1, prop2}) (
  <div className={prop1 + '-' + prop2}>
    <Child {...props}/>
  </div>
)

有没有类似的语法可用？

【问题讨论】：

据我所知，这种语法不存在

标签： javascript reactjs ecmascript-6 destructuring

【解决方案1】：

我们有这个：

const MyComponent = ({ prop1, prop2, ...rest }) (
  <div className={prop1 + '-' + prop2}>
    <Child prop1={prop1} prop2={prop2} {...rest} />
  </div>
)

【讨论】：

@free-soul，感谢编辑，但它并没有比最初的实现更简洁，如果我解构更多参数就会变得不那么简洁
没错，我同意。

【解决方案2】：

如果你定义你的组件为function，你可以使用arguments对象：

function MyComponent({ prop1, prop2 }) (
  <div className={prop1 + '-' + prop2}>
    <Child {...arguments[0]}/>
  </div>
)

【讨论】：

这是个好主意，但是我们可以做一些更惯用的方法吗？