
某段 React JSX 的代码, 通过 acorn 转为 JS 的 AST 树, 在通过 AST 树转回 JS 代码, 但是最后输出的代码里,JSX 部分被转为了 h 函数.
JSX 代码
export default function Home() { return ( <View className={styles.homeContainer}> <Logo uri="//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png" /> <Text className={styles.homeTitle}>Welcome to Your Rax App</Text> <Text className={styles.homeInfo}>More information about Rax</Text> <Text className={styles.homeInfo}>Visit https://rax.js.orgx</Text> </View> ); } output 代码
export default function Home() { return h("View", { className: styles.homeContainer }, [h("Logo", { uri: "//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png" }), h("Text", { className: styles.homeTitle }, ["Welcome to Your Rax App"]), h("Text", { className: styles.homeInfo }, ["More information about Rax"]), h("Text", { className: styles.homeInfo }, ["Visit https://rax.js.orgx"])]); } 问: 如何才能将 AST 转回 JS 代码的时候, JSX 部分保持原有的 JSX 语法, 而不是 JS 函数?
1 triple7 2021-07-06 14:45:27 +08:00 你是用什么把 ast 转为代码的。 |
3 triple7 2021-07-06 17:04:16 +08:00 建议你把细节说明下,关键代码。 按照我搜索到的库,你是这样使用的吗 let ast = transform(jsx_ast, { factory: "h" }); 另外为啥不用 babel,这是比较成熟的全套方案,而且有丰富的文档。 |
4 triple7 2021-07-06 17:06:01 +08:00 按照 jsx-ast-transformer 项目介绍: Transforms JSX AST into regular JS AST 大概率是只能转到 js ast 。 |