Javascript 如何在不同的html页面中重用react组件

我在两个不同的html页面中重复使用react组件时遇到问题

下面是我的应用程序的结构

react app
    |-- webpack.config
    |-- package
    `-- src
        |-- index.js
        |-- index.html
        |-- home.html
        `-- components
            |-- Main.js
            |-- Sector.js
            |-- Homepage.js

好的，在webpack.config中我有 这个

module.exports = {
  entry: './index.js',


entry: [
    'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
    'webpack/hot/only-dev-server',
    './src/index'

  ],

    output: {
    path: path.join(__dirname, '/../dist/assets'),
    filename: 'app.js',
  },


  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

在index.js中

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import Appd from './components/Main';
import Sector from './components/sector';
import Homepagesector from './components/Homepagesector';

ReactDOM.render(<Appd />, document.getElementById('app'));
ReactDOM.render(<Sector />, document.getElementById('sector'));  
ReactDOM.render(<Homepagesector />, document.getElementById('homepage'));

导入'core js/fn/object/assign'；
从“React”导入React；
从“react dom”导入react dom；
从“./components/Main”导入Appd；
从“./组件/部门”导入部门；
从“./components/Homepagesector”导入Homepagesector；
ReactDOM.render(



在组件文件夹中

Sector.js

require('styles/sector.css');

import React from 'react';

let yeomanImage = require('../images/dealzilla.png');

let yeomanImaged = require('../images/256.jpg');

class AppComponent extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState(e) {
      this.setState({data: e.target.value});
   }
  render() {


    return (
       <div className="page-wrap">
          <h1>not registered?register for free</h1>
          <div className="profile">
             <div className="profile-avatar-wrap">
               <img src={yeomanImaged} alt="Yeoman Generator" id="profile-avatar" alt="Image for Profile"/>
             </div>
             <div className="location">upload avatar</div>              
          </div>
          <h3>You could do this with a file input too...</h3>
       <div>
          <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
          <h4>{this.state.data}</h4>
       </div>
    </div>

require（'style/sector.css'）；
从“React”导入React；
让yeomanImage=require（'../images/dealzilla.png'）；
让yeomanimage=require（'../images/256.jpg'）；
类AppComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：'初始数据…'
}
this.updateState=this.updateState.bind（this）；
};
房地产（东）{
this.setState（{data:e.target.value}）；
}
render（）{
返回(
未注册？免费注册
上传头像
您也可以通过文件输入来完成此操作。。。
{this.state.data}

在组件文件夹中

主页.js

import React from 'react';

let yeomanImage = require('../images/dealzilla.png');

class AppedComponent extends React.Component {
  render() {
    return (
       <div>
          <img src={yeomanImage} alt="Yeoman Generator" /> 
          <h1 className="title">dealzilla</h1> 
          <li>
             <a href="index2.html"  className="a7" >Search</a>
             <a href="index2.html"  className="a7" >Search</a>
          </li>
          <li>
             <a href="index.html" className="a7" >Register</a>
          </li>    
       </div>
   );
  }
}

AppedComponent.defaultProps = {
};

export default AppedComponent;

从“React”导入React；
让yeomanImage=require（'../images/dealzilla.png'）；
类AppedComponent扩展了React.Component{
render（）{
返回(
德尔齐拉




);
}
}
AppedComponent.defaultProps={
};
导出默认的AppedComponent；

问题是我不能使用homepage.js组件 在my home.html页面中 它一点也没有出现 但是，我的Main.js组件能够显示

我仍然是react的初学者，我四处寻找答案，但在这方面没有找到任何答案 任何帮助都将不胜感激 先谢谢你

---

致以最诚挚的问候

这是我最后使用的，也许它会帮助那些同样陷入困境的人

---

这是一个很棒的工具，可以用来处理来自angular的react（反应）

这是我最后使用的工具，也许它可以帮助那些同样陷入困境的人

---

这是一个很棒的工具，可用于react from angular

我很好奇为什么您的所有组件都有相同的名称？这很可能会导致您在同一页面中尝试使用多个组件时出现问题。您是否尝试了不同的组件命名？嗨，Sandwichz，我更改了名称，但仍然得到相同的结果。看起来对我来说，好像reactlibrary在我这方面不一致，因为当更改我的组件名称时，这些组件不再出现在html页面上。只有一个组件工作，这就是Main.js。我很好奇为什么所有组件都有相同的名称？这很可能会在尝试使用多个组件时导致问题在同一页中。您是否尝试过为组件使用不同的名称？嗨，Sandwichz，我更改了名称，但仍然得到相同的结果。在我看来，reactlibrary在我这方面似乎不一致，因为在更改组件名称时，组件不再出现在html页上。只有一个组件工作，这就是Main.js一个。

require('styles/App.css');

import React from 'react';

let yeomanImage = require('../images/zilla.png');

class AppComponent extends React.Component {
  render() {
    return (
       <div>
          <img src={yeomanImage} alt="Yeoman Generator" /> 
          <h1 className="title"></h1>  
          <li>
             <a href="index2.html"  className="a7" >Signin</a>
          </li>
          <li>
             <a href="index.html" className="a7" >Register</a>
          </li>         
       </div>

In components folder 

require('styles/sector.css');

import React from 'react';

let yeomanImage = require('../images/dealzilla.png');

let yeomanImaged = require('../images/256.jpg');

class AppComponent extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState(e) {
      this.setState({data: e.target.value});
   }
  render() {


    return (
       <div className="page-wrap">
          <h1>not registered?register for free</h1>
          <div className="profile">
             <div className="profile-avatar-wrap">
               <img src={yeomanImaged} alt="Yeoman Generator" id="profile-avatar" alt="Image for Profile"/>
             </div>
             <div className="location">upload avatar</div>              
          </div>
          <h3>You could do this with a file input too...</h3>
       <div>
          <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
          <h4>{this.state.data}</h4>
       </div>
    </div>

import React from 'react';

let yeomanImage = require('../images/dealzilla.png');

class AppedComponent extends React.Component {
  render() {
    return (
       <div>
          <img src={yeomanImage} alt="Yeoman Generator" /> 
          <h1 className="title">dealzilla</h1> 
          <li>
             <a href="index2.html"  className="a7" >Search</a>
             <a href="index2.html"  className="a7" >Search</a>
          </li>
          <li>
             <a href="index.html" className="a7" >Register</a>
          </li>    
       </div>
   );
  }
}

AppedComponent.defaultProps = {
};

export default AppedComponent;