我正在使用 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)
提前致谢!
最佳答案
这是一种方法。我将在这里做几个假设。第一，你将使用 React Router。第二， header 是全站范围的，其余内容取决于路由/路径。
另请注意，我将您提供的大部分 html 放入单个 header 组件中。但是，根据 header 的复杂性，您可以将其进一步分解为导航组件和/或导航链接组件。
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'));
关于javascript - 如何将 html 转换为 JSX、ReactJS 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39004654/