如何将 html 转换为 JSX、ReactJS 组件？答案

【问题标题】：How to convert html to JSX, ReactJS Component?如何将 html 转换为 JSX、ReactJS 组件？
【发布时间】：2016-12-24 14:02:23
【问题描述】：

我正在使用 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 reactjs redux react-jsx

【解决方案1】：

这是一种方法。我将在这里做几个假设。一，你将使用 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'));

【讨论】：

这些都是正确的假设！ classie.js 应该去哪里，以前在我的index.html <head/>？
只是看看你是否看到了我之前的评论。请告诉我
这取决于你在做什么。通常，您将与组件相关的所有内容都保留在组件中以使其模块化。虽然我通常也有帮助文件，并且使用 Webpack 捆绑并插入到构建 html 中（这是一个更深入的答案）。我在这里更新了标题组件示例，为您提供了一些想法。一种使用 React 的生命周期方法 (componentDidMount) 来触发 API 请求，另一种在单击徽标时更改组件的状态。
非常感谢您的澄清。我应该在哪里打电话给classie.js 并保留文件？那么index.html中的函数init() {...}呢？我应该将它包含在componentDidMount 中吗？
更新了我的示例来回答这些问题。