Stateless Komponente zum Umschalten boolean

Question

Was ist die richtige Art der Umwandlung der folgenden Codes in zustandslose Komponente?

Verwaltet, um die Requisiten usw. zu definieren. Der folgende Code funktioniert beim Protokollieren einer Nachricht. Aber was wäre der beste Weg, um Boolean umzuschalten?

const handleToggleKitten =() => { 
    console.log('Hello from here'); 
    **// How to toggle the value of boolean here?** 
}; 

const About = (props) => { 
    const { showKitten } = props; 
    const kitten = require('./kitten.jpg'); 
    return (
    <div className="container"> 
     {showKitten && <div><img src={kitten} alt="kitchen" /></div>} 
    </div> 
); 
}; 

About.defaultProps = { 
    showKitten: false 
}; 

About.propTypes = { 
    showKitten: PropTypes.bool.isRequired 
}; 

Answer 1

Sie sollten eine stateful Komponente werden, dass sie die stateless Komponente und Pässe und Updates Requisiten es diese

class App extends React.Component { 
 
     
 
    state= {showKitten: false} 
 
    handleToggleKitten =() => { 
 
     this.setState((prevState, props) => ({ 
 
      showKitten: !prevState.showKitten 
 
     })) 
 
     }; 
 

 
    render() { 
 
     return (
 
       <About showKitten={this.state.showKitten} handleToggleKitten={this.handleToggleKitten}/> 
 
     ) 
 

 
    } 
 
} 
 
const About = (props) => { 
 
    const { showKitten } = props; 
 
    
 
    return (
 
    <div className="container"> 
 
     {showKitten && <div><img src={"http://addolo.com/wp-content/uploads/2016/12/kitten-pics-uncategorized-84-astonishing-photo-ideas-kittens-cattime-black-and-white-pictures-funny-with-captionskitten-cutekitten.jpg"} alt="kitchen" /></div>} 
 
     <button onClick={props.handleToggleKitten}>Toggle</button> 
 
    </div> 
 
); 
 
}; 
 

 

 
About.propTypes = { 
 
    showKitten: React.PropTypes.bool.isRequired 
 
}; 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<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> 
 
<div id="app"></div>

Answer 2

Hey Yen Sheng ein bisschen spät, aber versuchen macht.

let showKitten = false; 


const handleToggleKitten =() => { 
    console.log('Hello from here'); 
    **// How to toggle the value of boolean here?** 
    showKitten = !showKitten; 
};