Question

我目前正在使用React创建Chrome扩展程序。我想创建一个React组件来返回选项卡菜单的HTML，但是菜单没有显示出来。当我点击Inspect时，没有显示错误。在HTML中，我尝试创建一个带有TabMenu.jsx引用的id的div以及TabMenu.jsx的脚本标记，但似乎都没有工作。任何帮助将非常感激。谢谢！

account.html

<head>
     <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    <title></title>
</head>
<body>


    <div id="menu-div">Hi</div>
    <script type="text/babel" src="TabMenu.jsx"></script>
</body>

TabMenu.jsx

    //file: TabMenu.jsx
/** @jsx React.DOM */

var React = require('react')

//import React, { Component } from 'react';
var ReactDOM = require( 'react-dom' );

//import styles from "style.css"

export default TabMenu

var TabMenu = React.createClass({
    render: function() {
        return(
        <nav>
            <ul>
                <li><a href="sources.html" class="menu">My Sources</a> </li>
                <li> <a href="account.html" class="menu">Account</a> </li>
                <li> <a href="settings.html" class="menu">Settings</a> </li>
            </ul>
        </nav>

        )
    },
});

class Menu extends React.Component {
    render() {
        return (
            <div>
                <TabMenu />
            </div>
        )
    };
}

var menuDiv =  document.getElementById('menu-div');
var tabMenu = <TabMenu />
ReactDOM.render(
    tabMenu,
    menuDiv
);

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: {
    //bundle1: ['CiteSource.jsx'],
    "researcherManager": "./apps/researcherManager",
    "background": "./apps/background",
    "content": "./apps/content"
  },
  module: {

    loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
      { test: /\.json$/, loader: 'json-loader' },
        {test: /\.jsx$/, loader: "babel-loader"},

    ] //?insertPragma=React.DOM&harmony
  },
  resolve: {
    extensions: [ '.js', '.ts', '.tsx', '.jsx']
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  output: {
    filename: "[name].bundles.js",
    chunkFilename: "[id].bundle.js",
    sourceMapFilename: "[file].map"
  },
  devtool: 'source-map'
}

React组件未显示

0 个答案: