关于 AST 转 JSX 的疑问.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1236 天前的主题，其中的信息可能已经有所发展或是发生改变。

某段 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 函数?

4 条回复