在 React Native 中附加 JSX

Question

我正在寻找一种在 React Native 中以编程方式添加 JSX 元素的方法。 不是有条件的。

它需要是独立的function，到目前为止我找不到任何关于这个的信息。 让我给你代码示例；

const appendJSX = () => { 
  
 const jsx = <Text> Hello! </Text>

  append(jsx) // <---- can we do something like this?
 }

假设我用 useEffect 调用这个 function，它应该添加我在 function 中的任何 jsx。直到此时，我总是看到像推入数组或类似的东西。

更新

适用于 web 的等效行为；

 useEffect(() => {
 const div = document.createElement("div");
 div.innerText = "appended div"
 document.body.append(div)
 }, [])

如您所见，我们不必在应用程序中接触任何 JSX。 在 React Web 中可以到达 document.body 并附加我们想要的任何内容。但是我们如何在 React Native 中实现这一点？

Answer 1

不太确定你想做什么，但关于手动添加JSX 。 这就是答案。

在大多数情况下， JSX已经是语言的一部分。

  const a = <Text />
  export default a

将翻译成：

  const a = createElement(Text, null, null)
  export default a

因此，在大多数常见情况下，如果你在其他地方继续使用React ，那么变量a会保存一个React元素，而不会出现任何编译错误。

你可能想知道a到底是什么，它是 object：

  const a = { 
    $$typeof: Symbol(ReactElement), 
    props: null, 
    type: Text 
  }

所以你可以看到上面的唯一依赖项是Text和ReactElement Symbol。 只要你能解决它们，你就可以把它导出到任何地方。 后者通常由 Babel 负责。

Text和<Text />是有区别的。 如果你只是想导出一个Text ，它是一个 function 组件，那里有在线教程，你也可以深入任何第三方库，因为基本上这就是他们所做的，导出Text以便其他人可以使用它。