htmlをJSX、ReactJSコンポーネントに変換するには？

-2

私はWebpack、Redux、およびReactJSを使用しています。htmlをJSX、ReactJSコンポーネントに変換するには？

現在、私はindex.htmlに次のような設定をしていますが、JSX、ReactJS Componentに変換します。そうするための正しい方法と正しい方法は何ですか？

そして、私の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

ここには1つの方法があります。私はここでいくつかの仮定をするつもりです。 1つは、あなたがリアクタを使うことです。 2つ目は、ヘッダーが横並びであり、残りの内容がルート/パスに依存していることです。

また、私が提供したほとんどの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'));

出典

2016-08-17 20:20:49 jabacchetta

これは正しい前提です！私の 'index.html'の' 'にあった' classie.js'はどこに行きますか？ –

私の前のコメントを見たかどうかを確認するだけです。私に知らせてください –

それはあなたが何をしているかによって異なります。一般的に、コンポーネント内のコンポーネントに関連するすべてのものをモジュール化した状態に保ちます。私は通常、ヘルパーファイルなどを持っていますが、Webpackを使用してHTMLを構築してバンドルして挿入します（それははるかに詳細な答えです）。ここでヘッダーコンポーネントの例を更新して、いくつかのアイデアを紹介しました。 1つはReactのライフサイクルメソッド（componentDidMount）を使用してAPIリクエストをトリガし、もう1つはロゴをクリックしたときにコンポーネントの状態を変更します。 – jabacchetta

htmlをJSX、ReactJSコンポーネントに変換するには？

答えて

関連する問題