Question

我在使用我正在创建的Chrome扩展程序中使用Typescript创建React组件时遇到问题。我在welcome.html中放置了带有id的div，它应该会显示React组件。奇怪的是，welcome.html中的第一个React组件显示（TabMenu），但第二个组件Dropdown没有显示。任何帮助将不胜感激！

welcome.html

<html>
    <head>
         <link rel="stylesheet" type="text/css" href="style.css">

    </head> 
    <body>

        <div id="tabMenu"></div>

         <h2>Welcome!  Select your preferred citation format</h2>

        <div id="citeDropdown">Hello</div>

      <!-- Dependencies -->
        <script src="./node_modules/react/dist/react.js"></script>
        <script src="./node_modules/react-dom/dist/react-dom.js"></script>

        <!-- Main -->
    <script src="./components2.bundle.js"></script>
    <script src="interface.js"></script>
    </body>
</html>

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import { TabMenu } from "./reusable/TabMenu.tsx";
import { AccountFields } from "./reusable/AccountFields.tsx"
import { Dropdown } from "./reusable/Dropdown.tsx"

ReactDOM.render(
    <TabMenu compiler="TypeScript" framework="React" />,
    document.getElementById("tabMenu")
);

ReactDOM.render(
    <AccountFields compiler="TypeScript" framework="React" />,
    document.getElementById("accountFields")
);

ReactDOM.render(
    <Dropdown compiler="TypeScript" framework="React" />,
    document.getElementById("citeDropdown")
);

Dropdown.tsx

import * as React from "react";

export interface DropdownProps {compiler: string; framework: string;}

export class Dropdown extends React.Component<DropdownProps, undefined> {
    render() {
        console.log("in render");
        return (
          <div>
                <h1>Test header</h1>
          </div>
        );
    }
}

React组件未显示在Chrome扩展程序中

0 个答案: