Как преобразовать html в JSX, ReactJS Component?

-2

Я использую Webpack, Redux и ReactJS.Как преобразовать html в JSX, ReactJS Component?

В настоящее время у меня есть следующая настройка в моем 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

Вот один из способов. Я собираюсь сделать пару предположений здесь. Во-первых, вы будете использовать React Router. Во-вторых, заголовок имеет значение sitewide, а оставшееся содержимое зависит от маршрута/пути.

Также обратите внимание, что я выбрасываю большую часть 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

Это правильные предположения! Где должен идти 'classie.js', который раньше находился в моем' index.html'' '? –

Просто проверьте, видели ли вы мой предыдущий комментарий. Пожалуйста, дайте мне знать –

Это зависит от того, что вы делаете. Как правило, вы сохраняете все, что связано с компонентом внутри компонента, чтобы он был модульным. Хотя у меня также обычно есть вспомогательные файлы и такие, которые попадают в комплект и вставляются в сборку html с помощью Webpack (это гораздо более углубленный ответ). Я обновил здесь пример компонента заголовка, чтобы дать вам пару идей. Один использует методы жизненного цикла React (componentDidMount) для запуска запроса API, а другой изменяет состояние компонента при щелчке по логотипу. – jabacchetta

Как преобразовать html в JSX, ReactJS Component?

ответ

Смежные вопросы