沒有 React 的 Typescript 中的 JSX

Question

我試圖在沒有反應的情況下使用帶有 jsx 的打字稿。 它不起作用。 我總是在 tsconfig.json 中放一個"jsx": "preserve" 。 但我不明白我接下來要做什么。當我編譯 .tsx 文件時，webpack 拋出錯誤

ERROR in ./core/Navbar.tsx Module parse failed: /home/ubuntu/Desktop/framework/node_modules/ts-loader/index.js!/home/ubuntu/Desktop/framework/core/Navbar.tsx Unexpected token (9:15)

You may need an appropriate loader to handle this file type. 我閱讀了文檔，但我不明白如何在項目中使用全局 jsx 模塊。 是否可以在沒有反應的情況下使用 typescript + jsx？

我的 App.tsx 類

[

webpack 編譯文件時出錯

Answer 1

我剛做了這個，也許它會有所幫助

索引.tsx

export const JSX = {
  createElement(name: string, props: { [id: string]: string }, ...content: string[]) {
    props = props || {};
    const propsstr = Object.keys(props)
      .map(key => {
        const value = props[key];
        if (key === "className") return `class=${value}`;
        else return `${key}=${value}`;
      })
      .join(" ");
      return `<${name} ${propsstr}> ${content.join("")}</${name}>`;
  },
};

export default JSX;

外部.d.ts

declare module JSX {
  type Element = string;
  interface IntrinsicElements {
    [elemName: string]: any;
  }
}

配置文件

"jsx": "react",
"reactNamespace": "JSX",

測試一下

import JSX from "./index";

function Hello(name: string) {
    return (
        <div className="asd">
            Hello {name}
            <div> Hello Nested </div>
            <div> Hello Nested 2</div>
        </div>
    );
}

function log(html: string) {
    console.log(html);
}

log(Hello("World"));

Answer 2

如果您使用 jsx: prevserve，這意味着 Typescript 編譯器將輸出 .jsx 文件而不是將其編譯為 .js，因此，您最終將需要 Babel 之類的東西來轉譯您的 jsx，因為您的瀏覽器無法運行 jsx文件。

老實說，我不確定您要做什么，但是您應該使用 jsx:react 或 jsx:preserve + transpiler

Answer 3

查看 Stefan Baumgartners 的博客條目“JSX 是語法糖” 。 它解釋了如何使用干凈、易於閱讀的代碼在運行時將 JSX 轉換為 DOM 元素。