Estoy buscando una forma de agregar un elemento JSX mediante programación en React Native. No condicionalmente.
Tiene que ser una función independiente, hasta ahora no pude encontrar nada al respecto. Déjame darte un ejemplo de código;
const appendJSX = () => { const jsx = <Text> Hello! </Text> append(jsx) // <---- can we do something like this? }digamos que llamo a esta función con useEffect y debería agregar cualquier jsx que tenga dentro de la función. Hasta este punto, siempre veo cosas como empujar dentro de una matriz o algo así.
ACTUALIZAR
Comportamiento equivalente que funciona en la web;
useEffect(() => { const div = document.createElement("div"); div.innerText = "appended div" document.body.append(div) }, [])Como puede ver, no tenemos que tocar ningún JSX en la aplicación. Llegar a document.body y agregar lo que queramos es posible en React Web. Pero, ¿cómo podemos lograr esto en React Native?
No estoy muy seguro de lo que quiere hacer, pero en cuanto a agregar un JSX manualmente. Aquí está la respuesta.
JSX ya forma parte del lenguaje en la mayoría de los casos.
const a = <Text /> export default aVoluntad se traduce en:
const a = createElement(Text, null, null) export default a Por lo tanto, en la mayoría de los casos comunes, si continúa usando React en otro lugar, la variable a contiene un elemento React sin ningún error de compilación.
Quizás se pregunte qué contiene realmente a , es un objeto:
const a = { $$typeof: Symbol(ReactElement), props: null, type: Text } Entonces puede ver que las únicas dependencias en la pieza anterior son Text y ReactElement Symbol. Siempre que pueda resolverlos, puede exportar esto a cualquier lugar. Babel normalmente se ocupa de este último.
Hay una diferencia entre Text y <Text /> . Si solo desea exportar un Text que es un componente de función, habrá un tutorial en línea, también puede buscar en cualquier biblioteca de terceros, porque esencialmente eso es lo que hacen, exportar Text para que otras personas puedan usarlo.