如何将 JSX 存储在 TypeScript 的变量中？答案

【问题标题】：How to store JSX in variable in TypeScript?如何将 JSX 存储在 TypeScript 的变量中？
【发布时间】：2022-11-24 03:59:13
【问题描述】：

我有一个要求，我需要在其中存储 JSX/TSX 例如： <div>Hello {name} </div>

在一个变量中，像这样： const Ele = <><div>Hello {name} </div></> 为 React 中的另一个组件导出。

那么在普通的 Javascript 中它工作得很好！一切。

但问题是 TypeScript 不允许我存储它，即使在将它声明为 varName:any 之后

（注意：根据我的要求，创建 React 功能组件将不起作用！！！它必须是 .ts 文件中的普通变量）

如果有人可以帮助我？提前致谢！ ;)

我尝试使用默认提供的 :any 和不同的 JSX 匹配类型，但运气不好 :(

【问题讨论】：

【解决方案1】：

你想要一个 React 组件，它是一个返回 JSX 的函数：

const Ele = () => <><div>Hello {name} </div></>;

【讨论】：

正如我在 Post 中所说，React Component 不能满足我的要求，它必须是一个变量 :') 我只需要一个可以将 JSX 存储在变量中的类型，或者告诉 typescript 忽略这个变量类型的方法可能是什么？

【解决方案2】：

您应该为您的 React 节点元素使用 React.ReactNode 类型


const name: React.ReactNode = Ele

【讨论】：