Estoy usando composición en React y me gustaría llamar a un método principal. Todos los ejemplos que he encontrado usan herencia.
Componente contenedor: inserta un componente secundario
interface ContainerProps { children: ReactNode; } function Container(props: ContainerProps) { const [showApply, setShowApply] = useState<boolean>(false); return ( <> <div>Children</div> {props.children} </> ); // I want to call this method from the `children` function calledByChild(){} } Composición: debe llamar al método Container cuando se hace clic en el botón
function CombinedComponent() { return <Container handleApplyClicked={handleApplyClicked}> <Button type="primary" shape="round" onClick={tellContainerThatButtonWasClicked}> </Container > } Cuando se hace clic en el botón en el CombinedComponent , me gustaría informar al Container . Los ejemplos que he visto usan la herencia y pasan el método de los padres al hijo, pero en este caso, el hijo define al padre dentro de él.
¿Cómo se puede lograr esto?
Actualizar
Intenté agregar esto al elemento principal, pero los componentes secundarios no parecen tener la propiedad adicional agregada.
{React.cloneElement(props.children as React.ReactElement<any>, { onClick: myFunc })}Interfaz infantil/accesorios
interface CombinedComponentProps{ // This value is always undefined onClick?: () => void; } function CombinedComponent(props: CombinedComponentProps) { ... // Undefined console.log(props.onClick) }Recientemente tuve que hacer algo similar e, inspirado por esta publicación , terminé con:
const WrapperComponent = ({ children }) => { const myFunc = React.useCallback(() => { // ... }, []); return React.Children.map(children, (child) => { if (React.isValidElement(child)) { return React.cloneElement(child, { onClick: myFunc }); } }); } El siguiente fragmento demuestra cómo se podría usar el enfoque anterior para leer una propiedad secundaria del componente contenedor/principal.
Tenga en cuenta que el fragmento puede tardar unos segundos en cargarse y ejecutarse; No investigué el motivo de esto, ya que está fuera del alcance de la pregunta.
const App = () => { return ( <div> <h1>MyApp</h1> <WrapperComponent> <button id='btn1'>btn1</button> <button id='btn2'>btn2</button> <button id='btn3'>btn3</button> <div className='fakeBtn' id='div1'>div1</div> </WrapperComponent> </div> ); } const WrapperComponent = ({ children }) => { const [clickedChildId, setClickedChildId] = React.useState(); const myFunc = React.useCallback((id) => { setClickedChildId(id) }, [setClickedChildId]); React.useEffect(() => { clickedChildId && console.log(`the clicked child ID is ${clickedChildId}`); }, [clickedChildId]); return React.Children.map(children, (child) => { if (React.isValidElement(child)) { return React.cloneElement(child, { onClick: () => myFunc(child.props.id) }); } }); } ReactDOM.render(<App />, document.querySelector('#mountNode')) div.fakeBtn { background-color: #cdf; padding: 5px; margin: 3px 0; border: 1px solid #ccc; border-radius: 2px; } <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id='mountNode'></div>Puedes hacerlo clonando a los niños y dándole los accesorios que quieras:
React.cloneElement(children, {calledByChild}) De esta manera, agrega la función calledByChild a los niños, para que pueda llamarla desde el componente de niños.
Podría verse así:
const Parent = ({ children }) => { const func = () => console.log("click in Parent"); return ( <> <div>children</div> {cloneElement(children, {func})} </> ); }; const Children = ({func}) => { return <button onClick={func}>Click</button>; };Echa un vistazo a este artículo