用于切换布尔值的无状态组件答案

【问题标题】：Stateless component to toggle boolean用于切换布尔值的无状态组件
【发布时间】：2017-10-07 18:58:39
【问题描述】：

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

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

【问题讨论】：

handleToggleKitten 是如何调用的？我认为不需要这种方法。同时删除对所需属性没有意义的defaultProps。
错过了那部分，通过按钮 onClick 就像下面的代码一样。

标签： reactjs stateless

【解决方案1】：

您应该有一个 stateful 组件，它呈现 stateless 组件并传递和更新 props 给它

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>

【讨论】：

谢谢，效果很好！但是我得到 error 'handleToggleKitten' is missing in props validation react/prop-types 除非我在 propTypes 中声明它。

【解决方案2】：

嘿 Yen Sheng 有点晚了，但试试这个。

let showKitten = false;


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

【讨论】：