JSX в машинописном тексте без реакции

я попыталс¤ использовать машинописный текст с jsx без реакции. и это не сработает. я всегда ставил "jsx": "preserve"в tsconfig.json. Ќо ¤ не понимаю, что мне нужно делать дальше.  огда ¤ компилирую файл .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 в проекте. можно ли использовать машинописный текст + jsx без реакции?

введите описание изображени¤ здесь мой класс App.tsx

[мой класс App.tsx [2]

ошибка при компил¤ции файла webpack ошибка консоли

javascript,reactjs,typescript,

2

Ответов: 2

2

≈сли вы используете jsx: prevserve, это означает, что компил¤тор TypScript выводит .tsx-файлы, а не компилирует его в .js, в результате вам понадобитс¤ что-то вроде Babel дл¤ перевода вашего jsx в конце концов, поскольку ваш браузер не может запустить jsx файлы.

„естно говор¤, ¤ не уверен, что вы пытаетесь сделать, но вы должны либо использовать jsx: react, либо jsx: preserve + transpiler

0

я просто сделал это, может быть, это может помочь

index.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;

external.d.ts

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

tsconfig.json

"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"));
JavaScript, reactjs, машинопись,
Похожие вопросы
Яндекс.Метрика