通过 React-Select 传递 "restProps"

Question

问题： 我有一个简单的 Form Select 组件。它有几个道具，并使用 React Select V2 作为实现层。我想传递一些额外的道具。这是代码：

const SelectDropdownField = ({
  prop1,
  prop2.
  ...restProps
}: SelectProps): JSX.Element => (
  <Field
    name={name}
    render={({
      field,
      form: { setFieldValue, setFieldTouched, errors, touched }
    }: FieldProps<FormikValues>): ReactNode => (

      return (
        </div>
            <ReactSelect
                .. //someFieldsHere
                {...restProps} // this doesn't work
            />
            {JSON.Stringify({...restProps}, null, 2)} // this works
        </div>
      );
    }}
  />
);

我正在尝试传递 data-testid 属性。但是如果我在 ReactSelect 中传递它，它就不起作用。在它之外，它工作得很好。有什么想法吗？？

Answer 1

很遗憾，看了代码，好像不可能。

通过检查 here react-select 的渲染函数，我们可以看到我们可以添加自定义道具的唯一方法是通过 commonProps 对象。但是检查每个子组件，没有到达 DOM 的地方。只有 innerProps 到达 DOM 但图书馆用户无法控制它。

通过 React-Select 传递 "restProps"

Pass "restProps" through React-Select

typescript

reactjs

react-select

react-props