Actualmente estoy en el proceso de diseño de la interfaz para un motor de juego que está escrito en JavaScript y ReactJS.
Si un objeto del juego tiene una textura, la fuente de la textura aparecerá en el objeto del juego. Para que eso funcione, un objeto del juego debe tener la referencia de la textura o, más específicamente, la fuente de una textura. Lo que espero es tener un fragmento JSX como el siguiente.
<GameObject> <Texture source="myimage.png" /> </GameObject>La mejor solución que se me ocurrió para obtener la referencia es tener la textura como accesorio, así:
<GameObject texture={<Texture source="myimage.png" />} />Si la terminología específica del motor del juego es demasiado desconcertante, piense en ella como un componente de título dentro de un componente de botón, donde el componente de título tiene datos específicos a los que debe acceder el botón.
Mi pregunta se reduce a esto: ¿es posible acceder a la utilería de los niños después de que los niños hayan sido montados sin piratear o ser un anti-patrón?
Debido a que los enlaces en los comentarios están rotos, adjunto un enlace a la implementación actual del módulo Switch react-router donde se analizan los elementos secundarios (consulte la función render() ). También en este video tutorial, el autor accede a los elementos secundarios de los padres.
Para no tener el mismo problema con el vencimiento del enlace nuevamente, así es como se vería el código para acceder a los elementos secundarios de los padres en el ejemplo anterior cuando se inspira en Switch de react-router :
(dentro de GameObject)
const { children } = this.props React.Children.forEach(children, element => { if (!React.isValidElement(element)) return const { source } = element.props //do something with source.. })Debería poder hacer simplemente this.props.texture.props . No estoy seguro de que sea un antipatrón, pero tampoco creo que sea un patrón común. Ciertamente parece que puede estar rompiendo la encapsulación si desea acceder a un accesorio específico.
No tiene que pasar el elemento como accesorio para obtener una referencia a él. Puede acceder a los niños a través this.props.children .
Consulte la documentación para obtener más información.
¿Qué debe poseer la textura y cuál debe ser su padre?
¿Podría definir un GameObject que posea y sea el padre de la Textura? p.ej:
<GameObject textureSoure='myimage.png' />¿Y GameObject luego renderiza la textura (en el render() de GameObject)?
return <....> <Texture source={ this.props.textureSource } /> </....>