Reactjs 要切换布尔值的无状态组件

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

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

导出关于扩展组件的默认类{
状态={
小猫：错
}
handleToggleKitten=（）=>this.setState（{showKitten:！this.state.showKitten}）；
render（）{
const{showKitten}=this.state；
const kitten=require（'./kitten.jpg'）；
返回(
{showKitten&&}
);
}
}

管理定义道具等。以下代码用于记录消息。但切换布尔值的最佳方式是什么

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

const handleToggleKitten=（）=>{
log（'Hello from here'）；
**//如何在此处切换布尔值**
};
const About=（道具）=>{
const{showKitten}=道具；
const kitten=require（'./kitten.jpg'）；
返回(
{showKitten&&}
);
};
关于.defaultProps={
小猫：错
};
关于.propTypes={
showKitten:PropTypes.bool.isRequired
};

您应该拥有一个

有状态的组件，该组件将
呈现为无状态
组件，并向其传递和更新道具


类应用程序扩展了React.Component{
状态={showKitten:false}
handleToggleKitten=（）=>{
this.setState（（prevState，props）=>({
showKitten:！prevState.showKitten
}))
};
render（）{
返回(
) 
}
}
const About=（道具）=>{
const{showKitten}=道具；
返回(
{showKitten&&}
切换
);
};
关于.propTypes={
showKitten:React.PropTypes.bool.isRequired
};
ReactDOM.render（，document.getElementById（'app'））
嘿，颜生有点晚了，但试试这个

let showKitten = false;


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

如何调用
handleToggleKitten
？我认为没有必要用那种方法。同时删除对所需属性没有意义的
defaultProps
。忽略了该部分，请按下面的代码单击按钮。谢谢，效果非常好！然而，我得到的
错误“handleToggleKitten”在props验证/prop类型中丢失了
，除非我在propTypes中声明它。