如何使用来自 redux 表单和自定义组件的样式组件？

Question

我有这样的事情：

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>进行试验，但没有任何效果：

PropsWithChildren<WrappedFieldProps> & SelectInputT

PropsWithChildren<WrappedFieldProps & SelectInputT>

Answer 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