如何将html转换成JSX，ReactJS组件？
如何将html转换成JSX，ReactJS组件？
提问于 2016-08-17 11:20:39
我正在使用Webpack，Redux和ReactJS。
目前，我已经在我的index.html中设置了以下内容，但我希望将其转换为JSX，ReactJS组件。这样做的正确方法是什么？
在我的index.html <head/>中，有一个名为classie.js的类助手函数。
<script src="classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>在我的index.html <body/>里
<div id="wrapper">
<header>
<div class="container clearfix">
<h1 id="logo">
Practice Navigation Bar
</h1>
<nav>
<a href="">Button 1</a>
<a href="">Button 2</a>
</nav>
</div>
</header>
</div>因此，将其转换为如下ReactJS组件格式：
//App.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'
class NavBar extends Component {
render() {
return (
<div>
{/*e.g. What should go in here?*/}
</div>
);
}
}
function mapStateToProps(state) {
return state
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(NavBar) 提前谢谢你！
回答 1
Stack Overflow用户
发布于 2016-08-17 12:20:49
这里有一条路。我要在这里做几个假设。第一，你将使用React路由器。第二，头是站点范围的，其余的内容取决于路由/路径。
还请注意，我将把您提供的大部分html放到一个头组件中。但是，根据头部的复杂性，您可以将其进一步分解为nav组件和/或navlink组件。
Index.html
<body>
<div id="app"></div>
</body>App.js
import React from 'react';
import Header from '../Header';
function App({ children }) {
return (
<div>
<Header />
{children}
</div>
);
}
export default App;Header.js
import React, { Component } from 'react';
import { has, add, remove } from '../classie';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
display: false,
};
this.doSomething = this.doSomething.bind(this);
}
componentDidMount() {
this.getData();
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
add(header, "smaller");
} else {
if (has(header, "smaller")) {
remove(header, "smaller");
}
}
});
}
getData() {
// GET request here
}
doSomething() {
this.setState({
display: true,
});
}
render() {
return (
<header>
<div class="container clearfix">
<h1 id="logo" onClick={this.doSomething}>
Practice Navigation Bar
</h1>
<nav>
<a href="">Button 1</a>
<a href="">Button 2</a>
</nav>
</div>
</header>
);
}
}
export default Header;Index.js
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import App from './components/App';
import Home from './components/Home';
import InnerPage from './components/InnerPage';
module.exports = render((
<Router history={browserHistory}>
<Route component={App}>
<Route path="/" component={Home} />
<Route path="innerpage" component={InnerPage} />
</Route>
</Router>
), document.getElementById('app'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39004654
复制相关文章
相似问题
腾讯云开发者
