Tengo un componente que es bastante complejo, así que lo construyo a partir de componentes anidados. Simplificado:

 export function BlockProvideFeedback(props) { const handleSelect = (event) => console.log(event); const Form = (props) => ( <> <RadioList selected={props.selected} /> <Button onClick={handleSelect} /> </> ); const Message = () => ( <p>Thanks for the feedback</p> ); if (props.feedbackStatus == 'agreed') { return(<Form selected='done'/>); if (props.feedbackStatus == 'pending') { return(<Form selected='needswork'/>); } else { return(<Message/>); } }; BlockProvideFeedback.propTypes = { feedbackStatus: PropTypes.string.isRequired, };

El linter está, con razón en mi opinión, señalando que props.selected en Form(props) necesita propTypes. Pero no sé dónde y cómo proporcionarlos. Falta 'seleccionado' en la validación de accesorios .

Intenté lo obvio:

 BlockProvideFeedback().Form.propTypes { //... }

Pero eso arroja errores porque estoy instanciando el componente (llamando a la función) sin el contexto, los accesorios, los proveedores, etc.

¿Cómo pongo selected para mi componente anidado, en una validación de accesorios?

¿O tal vez estoy haciendo algo más terriblemente mal: por ejemplo, mi configuración completa de anidar el tal vez es tan poco reactiva que las herramientas, como los linters, fallarán sin poder resolverlo?