Javascript 如何在不同的html页面中重用react组件
我在两个不同的html页面中重复使用react组件时遇到问题 下面是我的应用程序的结构Javascript 如何在不同的html页面中重用react组件,javascript,html,reactjs,webpack,webpack-dev-server,Javascript,Html,Reactjs,Webpack,Webpack Dev Server,我在两个不同的html页面中重复使用react组件时遇到问题 下面是我的应用程序的结构 react app |-- webpack.config |-- package `-- src |-- index.js |-- index.html |-- home.html `-- components |-- Main.js |-- Sector.js
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;