Estoy tratando de hacer un componente contenedor en react-native que pueda transmitir todos sus accesorios a los niños que envuelve. Lo que realmente quiero es transmitir todos los apoyos funcionales a todos sus hijos. Se ve algo como esto a continuación. Quiero que se llame onPress in Wrapper cuando se presione TouchableOpacity .
Intenté esto a continuación pero no funciona
const Wrapper = ({children,...props})=>{ return <View {...props}>{children}</View> } const App = ()=>{ return ( <View style={{flex:1}}> <Wrapper onPress={()=>{console.log(2)}}> <TouchableOpacity/> </Wrapper> </View> ) } const App = () => { return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => { // do the action need here here }}> <Wrapper > </Wrapper> </TouchableOpacity> </View> ) }Le aconsejaría que use la función de ganchos en su lugar
Si intenta reutilizar funciones que están relacionadas ** useAdd.js **
export default () => { const addFuction(a, b) => { // do preprocessing here return a + b } return [addFuction] }componente principal
import useAdd from "/useAdd"; const App = () => { const [addFuction] = useAdd() return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => { addFuction(4,5) }}> ...action component... </TouchableOpacity> </View> ) }consola en usoAñadir gancho.... para ver los cambios visuales, use el estado de uso de reacción
Parece que está buscando map a los niños y aplicar los accesorios a cada uno. Eso podría verse así:
const Wrapper = ({children,...props})=>{ return (<> {React.Children.map(children, child => ( React.cloneElement(child, {...props}) ))} </>); }(método de mapeo de los niños tomado de esta respuesta )