Question

问题： 我有一个简单的Form Select Component。它有几个道具，并使用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”

1 个答案: