typescript 如何将TSX文件转换为JS文件

utugiqy6  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(270)

我有一个文件,这是用来显示我的网站上的标志写在。TSX格式,我无法找出如何写在。JS文件与有关相同的功能。

import React, { FC } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { Breakpoints } from "../../GlobalStyle";
import useMediaQuery from "./useMediaQuery";

const StyledImage = styled.img<Props>`
    height: ${({ height }) => (height ? height : "40px")};
    width: auto;
    cursor: pointer;
    @media (max-width: ${Breakpoints.mobile}px) {
        height: 28px;
    }
`;

type Props = {
    id: string;
    height?: string;
};

const ResponsiveLogo: FC<Props> = ({ id, height }) => {
    const isMobile = useMediaQuery(`(max-width: ${Breakpoints.mobile}px)`);

    let Url = isMobile
        ? "image1_link"
        : "image2_link" ;

    return (
        <>
            <Link to="/">
                <StyledImage id={id} height={height} alt={"logo"} src={Url} />
            </Link>
        </>
    );
};

export default ResponsiveLogo;
nfeuvbwi

nfeuvbwi1#

import React, { FC } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { Breakpoints } from "../../GlobalStyle";
import useMediaQuery from "./useMediaQuery";

const StyledImage = styled.img`
    height: ${({ height }) => (height ? height : "40px")};
    width: auto;
    cursor: pointer;
    @media (max-width: ${Breakpoints.mobile}px) {
        height: 28px;
    }
`;
const ResponsiveLogo= ({ id, height }) => {
    const isMobile = useMediaQuery(`(max-width: ${Breakpoints.mobile}px)`);

    let Url = isMobile
        ? "image1_link"
        : "image2_link" ;

    return (
        <>
            <Link to="/">
                <StyledImage id={id} height={height} alt="logo" src={Url} />
            </Link>
        </>
    );
};

export default ResponsiveLogo;

相关问题