как использовать, если и еще в реакции шаблона в ES6

Question

Я пытаюсь создать приложение с прореагировать с es2015, и это мой код:

import React from "react"; 

class App extends React.Component { 


    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      count : 1 
     }; 

    }; 

    render(){ 

     return <div onClick={this._handleclick.bind(this)}> 

      Clicks: {this.state.count} 

     </div> 

    } 
    _handleclick(){ 

     this.setState({count : this.state.count + 1}); 

    } 
} 

export default App; 

моя проблема Я хочу, если и другое заявление в моей визуализации функции ... я хочу, когда счетчик равен 1 <h1>hii</h1> тега шоу и, когда счетчик не равен 1 показать <h2>bye</h2> тег

Answer 1

• Используйте тройную выражение как {cond ? okay : notOkay}
• использования conditiona Ls как в {cond && okay || notOkay}
• Используйте do выражения, чтобы превратить ваши заявления в выражение, с { do { if (cond) { okay } else { notOkay } } }
• Предварительно выделить переменную вне шаблона JSX и просто место, что в этом выражении {result}

Answer 2

Вы можете сделать это следующим образом:

var Hello = React.createClass({ 

    getInitialState: function() { 
     return {count: 1}; 
    }, 
    handleclick: function() { 
     this.setState({count : this.state.count + 1}); 
    }, 
    render: function() { 
    let comp; 
    if(this.state.count === 1) { 
     comp = <h1>Hii</h1>; 
    } else { 
     comp = <h2>Bye</h2>; 
    } 
    return (
     <div> 
      {comp} 
     <div onClick={this.handleclick}> 

      Clicks: {this.state.count} 

     </div> 
     </div> 
    ); 
    } 
}); 

React.render(<Hello name="World" />, document.getElementById('container')); 

Я написал код в стиле сценария ES5. Вы можете сделать то же самое в стиле ES6, что вы приняли, просто добавив

let comp; 
    if(this.state.count === 1) { 
     comp = <h1>Hii</h1>; 
    } else { 
     comp = <h2>Bye</h2>; 
    } 

в вас render() выше функции возврата и визуализации компонента в качестве {comp}. Наверное, это то, чего ты хочешь.