reactjs - 通过 React-Select 传递“restProps”

Question

问题： 我有一个简单的表单选择组件。它有几个 props，并使用 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 中传递它，它就不起作用。在它之外，它工作得很好。有任何想法吗？？

标签： reactjstypescriptreact-propsreact-select

Answer 1

不幸的是，在查看代码之后，这似乎是不可能的。

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