Tengo un componente secundario como este.
Padre => Hijo
Cuando envío accesorios a mi componente secundario desde el componente principal. El accesorio no puede acceder a los componentes secundarios.
const Parent = () => { const [renderCount, setRenderCount] = useState(4); const renderCountHandler = () => { setRenderCount(renderCount + 1); }; return ( <div> <Child renderCountHandler={renderCountHandler}/> </div> ); }; const Child = forwardRef((props, ref) => { //Can't access props.renderCountHandler Only props.children <div>{props.}</div> });Soy un nuevo estudiante de reactjs. Así que no sé mucho al respecto. Si alguien me puede ayudar con esto. Es una gran ayuda para mí en mis estudios.❤️
Puede pasar state o el method como props padre a hijo.
Lea más aquí componentes y accesorios
Ejemplo:
const { forwardRef, useState } = React; const Parent = () => { const [renderCount, setRenderCount] = useState(4); const renderCountHandler = () => { setRenderCount(renderCount + 1); }; return ( <div> <p>{renderCount}</p> <br /> <Child renderCountHandler={renderCountHandler} /> </div> ); }; const Child = forwardRef((props, ref) => { //Can't access props.renderCountHandler Only props.children return ( <div ref={ref}> <button onClick={props.renderCountHandler}>Click Me</button> </div> ); }); ReactDOM.render(<Parent />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="root"></div>