如何将html转换为JSX，ReactJS组件？

-2

我正在使用Webpack，Redux和ReactJS。如何将html转换为JSX，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)

提前谢谢！

来源

2016-08-17 Jo Ko

这是一种方法。我要在这里做一些假设。一，你会使用React Router。二，标题是站点范围的，其余内容取决于路线/路径。

另请注意，我将大部分HTML提供给单个头部组件。但是，根据标题的复杂性，您甚至可以进一步将其分解为导航组件和/或导航组件。

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

来源

2016-08-17 20:20:49 jabacchetta

这些都是正确的假设！ 'classie.js'应该放在哪里，它曾经在我的'index.html'' '中？ –

只是检查，看看你是否看到我以前的评论。请让我知道 –

这取决于你在做什么。一般而言，您将与组件内的组件相关的所有内容都保持为模块化。尽管我通常也有帮助程序文件，并使用Webpack将其捆绑并插入到构建html中（这是一个更深入的答案）。我已经更新了头文件组件示例，给你一些想法。一个人使用React的生命周期方法（componentDidMount）来触发一个API请求，另一个人在点击标志时改变组件的状态。 – jabacchetta

如何将html转换为JSX，ReactJS组件？

回答

相关问题