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>
    );
}

然而，TypeScript版本＆lt;不支持ECMAScript 6的rest / spread属性作为参数使用。 2.1。

我目前的实施是：

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>
        );
    }
}

这在功能上（不是从性能角度来看）是否等同于ECMAScript 6版本？如果我错过了某些东西或者它可以变得更优雅，那么推荐使用上述rest / spread语法的方法是什么？

Answer 1

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

如果愿意，还可以使用FieldGroupProps界面并将其重写为箭头功能。

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

在React无状态组件中TypeScript相当于rest / spread props

1 个答案: