使用动态道具解构将基于类的 js 组件转换为打字稿组件答案

【问题标题】：Converting Class based js component to typescript component with dynamic props destructuring使用动态道具解构将基于类的 js 组件转换为打字稿组件
【发布时间】：2021-04-29 22:28:39
【问题描述】：

我有一个像这样的基于类的组件

class ArInput extends React.Component {
  render() {
    const { shadowless, success, error } = this.props;

    const inputStyles = [
      styles.input,
      !shadowless && styles.shadow,
      success && styles.success,
      error && styles.error,
      {...this.props.style}
    ];

    return (
      <Input
        placeholder="write something here"
        placeholderTextColor={argonTheme.COLORS.MUTED}
        style={inputStyles}
        color={argonTheme.COLORS.HEADER}
        iconContent={
          <Icon
            size={14}
            color={argonTheme.COLORS.ICON}
            name="link"
            family="AntDesign"
          />
        }
        {...this.props}
      />
    );
  }
}

我正在尝试使用反应挂钩将上述类转换为基于功能的组件。这是我在打字稿中想到的最好的

const ArInput =({ shadowless, success, error, style }:any)=> {

    const inputStyles = [
      styles.input,
      !shadowless && styles.shadow,
      success && styles.success,
      error && styles.error,
      {...style}
    ];

    return (
      <Input
        placeholder="write something here"
        placeholderTextColor={argonTheme.COLORS.MUTED}
        style={inputStyles}
        color={argonTheme.COLORS.HEADER}
        iconContent={
          <Icon
            size={14}
            color={argonTheme.COLORS.ICON}
            name="link"
            family="AntDesign"
          />
    }
    { ...shadowless, ...success, ...error, ...style }
  />
);

}

但我在这一行遇到错误{ ...shadowless, ...success, ...error, ...style }

错误是Expression expected.ts(1109)

在 javascript 代码中，这一行是 {...this.props}

如何将我的 javascript 类转换为 typescript？

我在 javascript 代码中转换这一行 {...this.props.style} 的方式是否正确？

【问题讨论】：

标签： javascript reactjs typescript react-native material-ui

【解决方案1】：

在道具列表中，做

{...this.props}

将从对象中提取每个单独的属性并将其列为对象。例如，如果this.props 是{ foo: 'foo' }，那么

{...this.props}

等价于

foo="foo"

在道具列表中。

您希望道具位于 <Input 道具列表中，因此请执行以下操作：

return (
  <Input
    placeholder="write something here"
    placeholderTextColor={argonTheme.COLORS.MUTED}
    style={inputStyles}
    color={argonTheme.COLORS.HEADER}
    iconContent={
      <Icon
        size={14}
        color={argonTheme.COLORS.ICON}
        name="link"
        family="AntDesign"
      />
    }
    shadowless={shadowless}
    success={success}
    error={error}
    style={style}

或者用道具制作一个物体，然后散布物体（不要散布单个道具）：

return (
  <Input
    placeholder="write something here"
    placeholderTextColor={argonTheme.COLORS.MUTED}
    style={inputStyles}
    color={argonTheme.COLORS.HEADER}
    iconContent={
      <Icon
        size={14}
        color={argonTheme.COLORS.ICON}
        name="link"
        family="AntDesign"
      />
    }
    {...{ shadowless, success, error, style }}

如果您要使用 TS，我还强烈建议使用比 any 更精确的类型 - 使用 any 会有效地禁用表达式的类型检查，这违背了 TS 的目的。

【讨论】：

【解决方案2】：

你可以试试这样的：

interface ArInputProps{
shadowless:string; //i am assuming all of them to be of type string,you can use boolean,Function or whatever you like
success:string;
error:string;
style:string
}

const ArInput =({ shadowless, success, error, style }:ArInputProps)=> {

    const inputStyles = [
      styles.input,
      !shadowless && styles.shadow,
      success && styles.success,
      error && styles.error,
      {...style}
    ];

    return (
      <Input
        placeholder="write something here"
        placeholderTextColor={argonTheme.COLORS.MUTED}
        style={inputStyles}
        color={argonTheme.COLORS.HEADER}
        iconContent={
          <Icon
            size={14}
            color={argonTheme.COLORS.ICON}
            name="link"
            family="AntDesign"
          />
    }
    shadowless={shadowless}
    success={success}
    error={error}
    style={style}
  />
);

【讨论】：