Question

im having problems with re-using react components in two different html pages

heres the structure of my app

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

okay in webpack.config i have this

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' }
    ]
  }
}

in 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'));

in 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>

in 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>

In components folder 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

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>

In components folder

homepage.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;

The problem is that I am not able to use homepage.js component in my home.html page it doesnt appear at all however my Main.js component is able to appear

Im still a beginner in react, I've looked around for answers and didnt find any on this regard any help would be appreciated thank you in advance best regards

Answer 1

继承人我最终使用的可能它会帮助那些也被卡住的人 https://ui-router.github.io/react/

它是一个很好的工具，可用于来自角度的反应

How to reuse react components in different html pages

1 个答案: