javascript - TypeScript 相当于 React 无状态组件中的 rest/spread Prop

Question

我正在尝试添加以下函数，取自 bootstrap-react documentation , 到我的 TypeScript + React 项目:

function FieldGroup({ id, label, help, ...props }) {
    return (
        <FormGroup controlId={id}>
            <ControlLabel>{label}</ControlLabel>
            <FormControl {...props} />
            {help && <HelpBlock>{help}</HelpBlock>}
        </FormGroup>
    );
}

但是，< 2.1 的 TypeScript 版本不支持用作参数的 ECMAScript 6 的 rest/spread 属性。

我目前的实现是:

interface FieldGroupProps extends React.HTMLAttributes {
    id?: string;
    label?: string;
    help?: string;
}

class FieldGroup extends React.Component<FieldGroupProps, {}> {
    public render(): JSX.Element {
        const rest = objectWithout(this.props, ["id", "label", "help"]);
        return (
            <FormGroup controlId={this.props.id}>
                <ControlLabel>{this.props.label}</ControlLabel>
                <FormControl {...rest} />
                {this.props.help && <HelpBlock>{this.props.help}</HelpBlock>}
            </FormGroup>
        );
    }
}

这在功能上(不是从性能 Angular 来看)是否等同于 ECMAScript 6 版本？如果我遗漏了什么或者它可以变得更优雅，那么推荐使用上述 rest/spread 语法的方法是什么？

Answer 1

在 TypeScript 3 中，您的第一个示例可以正常工作，因此您无需将其重写为类。

如果愿意，您还可以使用您的 FieldGroupProps 接口(interface)并将其重写为箭头函数。

const FieldGroup = ({ id, label, help, ...props }: FieldGroupProps) => <FormGroup controlId={id}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl {...props} />
    {help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>;