Tengo un HoC de reacción donde definí algunos estados y lo estoy pasando al componente envuelto. Pero el propio componente envuelto tiene algunos accesorios.
HoC.tsx
const HOC = (Component: React.ComponentType<T>) => { const [someState, setSomeState] = useState() const WrappedComponent = (props: T) => return( <Component {(...props) as T} someState={someState}/> ) return WrappedComponent }Uso especial en un componente que necesita otros accesorios
interfae NewComponentProps { x: number } const NewComponent: React.FC<NewComponentProps> = (props) => { let {x, someState} = props //Here I am not able to access someState prop which is coming from HOC, typescript is giving error return ( ... ) } export default HoC(NewComponent)Cómo manejar tal caso y si agrego someState en la interfaz NewComponentProps, funcionará, pero tengo que pasar someState prop cuando llamaré a NewComponent en cualquier lugar
Entonces, ¿cuál debería ser el tipo de accesorios del nuevo componente para acceder a ambos accesorios?
Aquí hay un pequeño ejemplo de cómo puede escribirlo para que funcione
type WrappedProps = { b: string; }; // Here you type the child component as generic T combined with // your Wrapped props const Wrapped = <T,>(Comp: ComponentType<T & WrappedProps>) => { return (props: T) => { return <Comp {...props} b="World" />; }; }; // ============================ type CompProps = { a: string; }; // You need to manually pass the props of your component to the Wrapped // function, because it can't infer the type const Comp = Wrapped<CompProps>((props) => { // props now has the type CompProps & WrappedProps return ( <p> A: {props.a} <br /> B: {props.b} </p> ); }); // ============================ export default function App() { return <Comp a="Hello" />; }