如何在react-select自定义组件中获取父组件的errors props

问题核心在于：react-select渲染自定义组件时，只会传递自身内部的props，不会自动携带父组件（StandardSelect）的errors，所以需要手动通过包装组件把errors传递进去。

修改后的代码： #

首先修改StandardSelect组件，将errors通过匿名组件传递给自定义的componentSelect：

export const StandardSelect = ({
    options=[],
    label,
    key,
    errors,
    ...props
})=>{
    return (
        <div className="form-group mb-3 " {...key || ''}>
            <FormLabel>{label}</FormLabel>
            <Select 
                components={errors && { 
                    Control: (selectProps) => <componentSelect errors={errors} {...selectProps} /> 
                }} 
                options={options}
                {...props}
            />
        </div>
    )
}

componentSelect组件无需修改，现在就能正常接收errors：

import React from 'react'
import Select,{ components } from 'react-select'
import { FormLabel } from 'react-bootstrap'

const componentSelect = ({errors,...props}) => {
    console.log(errors) // 现在能正常拿到StandardSelect传入的errors
    return (<div>
      <components.Control {...props} />
      <div className="invalid-feedback">Error {errors?.message}</div>
    </div>)
};

原理说明： #

通过创建一个匿名的Control组件，在这个组件内部把StandardSelect的errors作为props传递给componentSelect，同时保留react-select原本传递的所有selectProps，这样自定义组件就能同时拿到内部props和父组件的errors了。

内容的提问来源于stack exchange，提问作者abasworks