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

【问题标题】：How to reuse react components in different html pages如何在不同的 html 页面中重用 react 组件
【发布时间】：2017-04-24 23:11:48
【问题描述】：

我在两个不同的 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'));

在 index.html 中

<!doctype html>
<html >

<head>
  <meta charset="utf-8">
  <title>zilla</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
</head>

  <!-- REQUIRED 3/3 - the image crop directive -->


   <body >
      <header>
         <div id="app"></div>
      </header>

      <script src="appcontroller.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>

      <script type="text/javascript" src="/assets/app.js"></script>
      <script type="text/javascript" src="resample.js"></script>
      <script type="text/javascript" src="avatar.js"></script>
</body>      
</html>

在 home.html 中

<html>
<head>
</head>   
<body >
<header>
  <div id="homepage"></div>
</header>
   <script src="appcontroller.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
   <script type="text/javascript" src="/assets/app.js"></script>
   <script type="text/javascript" src="resample.js"></script>
   <script type="text/javascript" src="avatar.js"></script>
   <script type="text/javascript" src="avatar.js"></script>
</body>
</html>

在组件文件夹中主.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

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>

在组件文件夹中

主页.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;

问题是我无法使用 homepage.js 组件在我的 home.html 页面中它根本没有出现但是我的 Main.js 组件能够出现

我仍然是反应的初学者，我已经四处寻找答案，但没有找到这方面的任何答案任何帮助，将不胜感激先感谢您最好的问候

【问题讨论】：

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

标签： javascript html reactjs webpack webpack-dev-server

【解决方案1】：

这就是我最终使用的东西，也许它会帮助那些也被卡住的人 https://ui-router.github.io/react/

它是一个很好的工具，可以与来自 angular 的 react 一起使用

【讨论】：