接收组件 props 时使用 rest 参数答案

【问题标题】：Using rest parameters when receiving component props接收组件 props 时使用 rest 参数
【发布时间】：2021-08-18 14:33:21
【问题描述】：

如何使用 rest 参数来接收 react 功能组件中的扩展属性？

这是我的组件：

import React from 'react';
import "./button.component.css"

interface IProps
{
    onClick: ()=>void,
    caption: string,
}

function ButtonComponent( {onClick, caption, ...otherProps} : IProps) {
    return (
        <button onClick={onClick} className="button" {...otherProps}>{caption}</button>
    );
};

export default ButtonComponent;

我是这样使用它的：

<ButtonComponent id="register" caption="CREATE ACCOUNT" style={{width:"48%", backgroundColor:"#00AAFF", color:"#FFF"}} onClick={()=>{console.log("")} }></ButtonComponent>

这给出了错误：

TypeScript error in /Users/hexdump/Documents/Development/react/crwn-clothing/src/components/register-form/register-form.component.tsx(16,34): Type '{ id: string; caption: string; style: { width: string; backgroundColor: string; color: string; }; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & IProps'.

为什么不能在按钮标签属性中展开界面中不存在的属性？

【问题讨论】：

stackoverflow.com/questions/40032592/… 这就是你要找的东西：D
@AnhTuan 嗯，这对我来说似乎有点骇人听闻。我在打字稿存储库中看到人们多年来一直在要求解决这个问题......似乎他们还没有修复它：P。另一方面，这是针对 Typescript 2.1 的。情况有了很大改善。
同意，但我认为 type script 的主要目的是 'type' 。所以使用 ...otherProps，很难知道该道具中存储了什么样的数据：D

标签： javascript reactjs typescript

【解决方案1】：

ButtonComponent 的正确输入是：

function ButtonComponent( 
{onClick, caption, ...otherProps} : IProps & React.ButtonHTMLAttributes<HTMLButtonElement>
) {
    return (
        <button onClick={onClick} className="button" {...otherProps}>{caption}</button>
    );
};

IProps 是用户自定义的 props，React.ButtonHTMLAttributes<HTMLButtonElement> 是 correct button 的标签属性。尖括号内的HTMLButtonElement 是用于输入argument of event handlers 的类型。

TS playground

【讨论】：

【解决方案2】：

你应该把你想让他添加的属性发给他：

import React from 'react';
import "./button.component.css";
import styled from 'styled-components';

const Button = styled.button`
  width:"48%", 
  backgroundColor:"#00AAFF", 
  color:"#FFF"
`;

interface IProps
{
    onClick: ()=>void,
    caption: string,
    id: int
}

function ButtonComponent( {onClick, {...otherProps} : IProps) {
    return (
        <Button onClick={onClick} {...otherProps}>{caption}</Button>
    );
};

export default ButtonComponent;

const otherProps = {
 "id":"register",
 "caption":"CREATE ACCOUNT"
};
<ButtonComponent onClick={()=>{console.log("")}} {...otherProps}></ButtonComponent>

我使用 styled-components 作为样式。安装：

yarn add styled-components //In yarn
npm install --save styled-components //In npm

【讨论】：

没错，这是我不想做的。我不想将所有可能的属性都添加到 ButtonComponent 签名中。我只想添加 onClick 和标题并使用其余参数。这不是我要找的。它适用于这种特定情况，但不适用于可以传递任何 html 属性的通用情况。
你也可以这样使用，你必须创建一个常量 key => 值并在参数中添加扩展运算符中的括号。
正如我之前所说，这不是我需要的。我不想指定我可以在接口类型中获得的每个道具。
在某些时候，您将不得不收集您需要在按钮中显示它们的参数，当您将它们添加到变量时，键 => 值，并且无论数字如何都显示它们参数