问如何将html转换成JSX，ReactJS组件？
EN

Stack Overflow用户

提问于 2016-08-17 11:20:39

回答 1查看 4.9K关注 0票数 2

我正在使用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)

提前谢谢你！

javascript

html

redux

reactjs

回答 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'));