將JavaScript轉換爲使用React組件

Question

React的新特性，並試圖在React中編寫我的腳本，但不知道該怎麼做。我嘗試過使用狀態，但這只是讓我更加困惑。下面的代碼是我可能通常創建的一些示例。

這裏是我的腳本：

const hamburger = document.querySelector(".hamburger"); 
hamburger.addEventListener("click", function() { 
    hamburger.classList.toggle("is-active"); 
    document.querySelector(".navigation").classList.toggle("slide-in"); 
    document.querySelector("body").classList.toggle("menu-active"); 
    document.querySelector(".shell-ui-main").classList.toggle("menu-overlay"); 
}); 

這是一個基本反應成分的導航欄：

import React from 'react'; 

export default class NavComponent extends React.Component { 

    render() { 
     return (
      <div className="container"> 
       <button className="hamburger hamburger--squeeze" type="button"> 
        <span className="hamburger-box"> 
         <span className="hamburger-inner"></span> 
        </span> 
       </button> 
       <a className="logo-link" href="/"> 
        <img width="94" height="31" src="/img/logos/logo.png" srcSet="/img/logos/logo.png 1x, /img/logos/logo@2x.png 2x, /img/logos/logo@3x.png 3x" 
         alt="logo" className="logo" /> 
       </a> 
       <nav className="navigation"> 
        <ul className="nav"> 
         <li className="single-item"> 
          <a href="/">Home</a> 
         </li> 
         <li className="single-item"> 
          <a href="#">Item 2</a> 
         </li> 
         <li className="single-item"> 
          <a href="#">Item 3</a> 
         </li> 
         <li className="single-item"> 
          <a href="#">Item 4</a> 
         </li> 
        </ul> 
       </nav> 
      </div> 
     ); 
    } 
} 

Answer 1

這裏的情況下，在該溶液有人有興趣。此外，我將道具傳遞給組件並從那裏控制，而不是單個的const。

import React from 'react'; 

const HamburgerToggle = (props) => (
    <button className={"hamburger hamburger--squeeze" + (props.active ? " is-active" : "")} onClick={props.clickHandler} type="button"> 
     <span className="hamburger-box"> 
      <span className="hamburger-inner"></span> 
     </span> 
    </button> 
); 

const Logo =() => (
    <a className="logo-link" href="/"> 
     <img width="94" height="31" src="/img/logos/logo.png" srcSet="/img/logos/logo.png 1x, /img/logos/logo@2x.png 2x, /img/logos/logo@3x.png 3x" alt="Logo" className="logo" /> 
    </a> 
); 

const Navigation = (props) => (
    <nav className={"navigation" + (props.active ? " slide-in" : "")}> 
     <ul className="nav"> 
      <li className="single-item"> 
       <a href="/">Home</a> 
      </li> 
      <li className="single-item"> 
       <a href="#">intem 2</a> 
      </li> 
      <li className="single-item"> 
       <a href="#">item 3</a> 
      </li> 
      <li className="single-item"> 
       <a href="#">item 4</a> 
      </li> 
     </ul> 
    </nav> 
); 

export default class NavComponent extends React.Component { 

    state = {active: false}; 

    handleClick(e){ 
     this.setState({active: !this.state.active}); 
     console.log(this.state.active); 
    } 

    render() { 
     return (
      <div className="container"> 
       <HamburgerToggle active={this.state.active} clickHandler={this.handleClick.bind(this)} /> 
       <Logo /> 
       <Navigation active={this.state.active} clickHandler={this.handleClick.bind(this)} /> 
      </div> 
     ); 
    } 
} 

Answer 2

您可以提取重複的HTML代碼到可重複使用的無狀態/有狀態的組件。看到facebook introduction to ReactJS

一個示例如下所示與Link組件：

const links = ['Home', 'Item1', 'Item2', 'Item3']; 
 

 
// Stateless components 
 
const Link = ({text, onClick}) => (
 
    <li className="single-item" 
 
     onClick={onClick}> 
 
     <a href="#">{text}</a> 
 
    </li>); 
 

 
const Hamburger =() => (
 
    <button className="hamburger hamburger--squeeze" 
 
     type="button" 
 
    > Menu 
 
     <span className="hamburger-box"> 
 
      <span className="hamburger-inner"></span> 
 
     </span> 
 
    </button>); 
 

 
const LogoLink =() => (
 
    <a 
 
     className="logo-link" 
 
     href="/" 
 
    > 
 
     <img width="94" 
 
      height="31" 
 
      src="http://placehold.it/15x15" 
 
      srcSet="http://placehold.it/15x15 1x, http://placehold.it/30x30 2x, http://placehold.it/45x45 3x" 
 
      alt="logo" 
 
      className="logo" 
 
     /> 
 
    </a> 
 
); 
 

 

 
// Stateful component 
 
class NavComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     selectedNavLink: 'No nav link selected', 
 
    }; 
 
    } 
 

 
    onClickNavLink(text) { 
 
    console.log(text); 
 
    this.setState((state, props)=> ({selectedNavLink: text})); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div className="container"> 
 
      <h1>Selected: {this.state.selectedNavLink}</h1> 
 
      <Hamburger /> 
 
      <LogoLink /> 
 
      <nav 
 
      className="navigation" 
 
      > 
 
       <ul className="nav"> 
 
       {links.map(text => (<Link text={text} key={text} onClick={this.onClickNavLink.bind(this, text)} />))} 
 
       </ul> 
 
      </nav> 
 
     </div>); 
 
    } 
 
} 
 

 
ReactDOM.render(<NavComponent/>, document.getElementById('camelBack'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js'></script> 
 

 
<div id="camelBack"></div>