打字稿附加道具答案

【问题标题】：Typescript additional props打字稿附加道具
【发布时间】：2020-12-26 07:06:59
【问题描述】：

我正在尝试使用 typescript 和 Formik 创建自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗？我需要添加额外的道具标签和名称......我已经坚持了一段时间，希望我在这里遗漏了一些非常简单的东西！？

{/* {label && <label htmlFor={name} className="text-input-label">{label}</label>} */}

请参阅下面代码中的上述行。

import React from "react";
import styled from "styled-components";
import { FieldHookConfig, useField } from "formik";

interface AdditionalProps {
  label: string;
  name: string;
}

const MyTextInput = (props: FieldHookConfig<string>) => {
  const [field, meta] = useField(props);
  return (
    <div className={"text-input " + props.className}>
      {/* {label && <label htmlFor={name} className="text-input-label">{label}</label>} */}
      <div className="card-backdrop">
        <input {...field} placeholder={props.placeholder} />
      </div>
    </div>
  );
};

export default styled(MyTextInput)``

谢谢！！！

【问题讨论】：

props: FieldHookConfig<string> & { name: string, label: string }

标签： reactjs typescript

【解决方案1】：

如下创建一个新的道具作为接口，并在你的组件中使用它作为道具类型

interface ComponentProps<T> {
  config : FieldHookConfig<T>;
  label: string;
  name: string;
}
const MyTextInput = (props: ComponentProps<string>) => {}

所以你可以在你的组件中使用你的 formik 配置（FieldHookConfig），如下所示 props.config.className 或 props.config.placeholder 并且您可以使用其他道具，例如 props.label 和 props.name

最后你的组件看起来像

import React from "react";
import styled from "styled-components";
import { FieldHookConfig, useField } from "formik";

interface ComponentProps<T> {
  config : FieldHookConfig<T>;
  label: string;
  name: string;
}

const MyTextInput = (props: ComponentProps<string>) => {
  const [field, meta] = useField(props.config);
  return (
    <div className={"text-input " + props.config.className}>
      {props.label && <label htmlFor={props.name} className="text-input-label">{props.label}</label>}
      <div className="card-backdrop">
        <input {...field} placeholder={props.config.placeholder} />
      </div>
    </div>
  );
};

export default styled(MyTextInput)

【讨论】：

您好，感谢您的快速回复。像这样的 TS，但是，我创建了一个错误，我在此过程中一直看到......我调用组件的方式如下：<MyTextInput name="displayName" placeholder="Display Name" /> 我现在收到一个错误：Property 'placeholder' does not exist on type 'IntrinsicAttributes & Pick<Pick<ComponentProps<string>, "label" | "name" | "config"> & Partial<Pick<ComponentProps<string>, never>>, "label" | ... 1 more ... | "config"> & { ...; } & { ...; }'. 跨度>
谢谢 - 但这就是我根据上面的评论所说的......？
占位符道具在您的配置中，因此您将其称为

【解决方案2】：

我找到了一种通过使用 formiks Field 和 FieldAttributes 组件来获得所需结果的方法。

我能够使用所有 formiks 内置的 props 和 useField 挂钩，并且能够传递额外的 props 以实现对样式的完全控制。

我使用的代码见下文。 :)

import React from "react";
import styled from "styled-components";
import { useField, FieldAttributes, Field } from "formik";

type MyTextInputProps = {
  label?: string;
  name: string;
  className?: string;
} & FieldAttributes<{}>;

const MyTextInput: React.SFC<MyTextInputProps> = ({
  label,
  placeholder,
  type,
  className,
  ...props
}) => {
  const [field, meta] = useField<{}>(props);
  return (
    <div className={"text-input " + className}>
      {label && <label className="text-input-label">{label}</label>}
      <div className="card-backdrop">
        <Field placeholder={placeholder} type={type} {...field} />
        {meta.touched && meta.error && (
          <div className="text-input-error">{meta.error}</div>
        )}
      </div>
    </div>
  );
};

export default styled(MyTextInput)

然后通过以下方式调用它

<MyTextInput name="displayName" placeholder="Display Name" />

【讨论】：