如何将样式化组件与来自 redux 表单和自定义组件的 Field 一起使用？答案

【问题标题】：How to use styled components with Field from redux form and custom component?如何将样式化组件与来自 redux 表单和自定义组件的 Field 一起使用？
【发布时间】：2022-09-28 02:58:40
【问题描述】：

我有这样的事情：

const StyledField = styled(Field)`
  outline: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  line-height: 1.2;
  border-radius: 3px;

  option {
    color: #666;
    font-size: 14px;
  }
`;

 <StyledField
      options={options}
      additionalTooltipStyles={additionalTooltipStyles}
      name=\"targetPhase\"
      component={SelectInput}
      placeholder={getMessage(\'details.edit.innovation.status.change.phase\')}
      title={getMessage(\'details.edit.phase.change.innovation.form.tooltip.title\')}
      description={getMessage(\'details.edit.phase.change.innovation.form.tooltip\')}
      label={getMessage(\'details.edit.innovation.status.choose.phase.description\')}
    />

我有一个错误：

    Types of parameters \'props\' and \'props\' are incompatible.
      Type \'PropsWithChildren<WrappedFieldProps>\' is missing the following properties from type \'SelectInputT\': description, label, options, title, and 3 more. [2322]

label、title 或 description 等道具来自 SelectInput。如何向 StyledField 添加类型，以便我接受 SelectInput 提供的道具？

我试图添加这个：

样式化（字段）

这是来自 SelectInput 的道具，但出现此错误：

Type \'SelectInputT\' does not satisfy the constraint \"symbol\" | \"object\" | \"data\" | \"form\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"button\" | ... 154 more ... | \"view\"\'.
  Type \'SelectInputT\' is not assignable to type \"view\"\'. [2344]

我也试过：

styled<PropsWithChildren<SelectInputT>>(Field)

但有类似的错误

编辑：

这是一个最小的可重现示例：

https://codesandbox.io/s/styled-field-redux-form-mtgu8y?file=/src/App.tsx

创建最小示例后，我尝试使用PropsWithChildren<WrappedFieldProps> 进行试验，但没有任何效果：

styled<PropsWithChildren<WrappedFieldProps> & SelectInputT>(Field)

styled<PropsWithChildren<WrappedFieldProps & SelectInputT>>(Field)

你能准备一个最小的可重现示例（codesandbox）吗？该问题可能与Field 组件本身有关。
@BartKrakowski 将 repo 添加到 Codesandbox

标签： javascript reactjs typescript redux-form

【解决方案1】：

SelectInput 组件必须实现 WrappedFieldProps 接口。您可以简单地将这个接口实现到SelectInput 组件：

const SelectInput = ({ input }: WrappedFieldProps) => {
  return <p>{input.name}</p>;
};

如果你想给这个组件添加自己的 props，你可以简单地扩展这个接口

interface SelectInputT extends WrappedFieldProps {
  yourExtraProp: any
}

https://codesandbox.io/s/styled-field-redux-form-forked-empqhz?file=/src/App.tsx

【讨论】：

您的第二个代码不起作用，或者我做错了什么codesandbox.io/s/styled-field-redux-form-forked-8b4rv7?file=/…
请注意，您不能将options 属性传递给StyledField 组件，因为StyledField 是一个样式化字段（来自redux-form），而不是您自己的组件。使新的自定义道具可选使其工作，但如果这是由于我上面写的内容而导致的预期结果，请 IDK。
如果我将 styledField 替换为 Field 它可以工作。我可以使用自定义道具，但不能使用样式组件。
不完全的。您必须从该界面传递所有必需的道具：WrappedFieldProps。 codesandbox.io/s/styled-field-redux-form-forked-8b4rv7?file=/…
你能详细说明吗？你只是复制粘贴了我的代码沙箱。