无状态组件切换布尔值

将以下代码转换为无状态组件的正确方法是什么？无状态组件切换布尔值

export default class About extends Component { 

    state = { 
    showKitten: false 
    } 

    handleToggleKitten =() => this.setState({ showKitten: !this.state.showKitten }); 

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

管理定义的道具等下面的代码工作记录消息。但是，什么是切换布尔值的最佳方式？

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 
};

来源

2017-05-09 Yen Sheng

如何调用'handleToggleKitten'？我没有看到任何需要这种方法。同时移除对所需属性没有意义的'defaultProps'。 – Sulthan

错过了该部分，通过按钮onClick像下面的代码。 –

你应该有一个stateful组件呈现stateless组件和通行证和更新的道具将其

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>

来源

2017-05-09 12:51:59

谢谢，它工作的很棒！但是我得到错误'handleToggleKitten'在道具验证react/prop-types中缺少，除非我在propTypes中声明它。 –

嘿颜圣晚了一点，但尝试。

let showKitten = false; 


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

来源

2018-01-12 11:29:50

无状态组件切换布尔值

回答

相关问题