将道具传递给处理函数

Question

我关注的是Pure React，有一个House组件需要一些构建（为简洁起见，省略了导入）：

class House extends React.Component {

    state = {
        bathroom: true,
        bedroom: false,
        kitchen: true,
        livingRoom: false
    }

    flipSwitch = (action) => {
        this.setState({
            ???????????????
        });
    }

    render () {
        return (
            <>
            <RoomButton room='kitchen' handler={this.flipSwitch}/>
            <RoomButton room='bathroom' handler={this.flipSwitch}/>
            <RoomButton room='livingRoom' handler={this.flipSwitch}/>
            <RoomButton room='bedroom' handler={this.flipSwitch}/>
            </>
        );
    }
}

const RoomButton = ({room, handler}) => (
    <button onClick={handler}>
        {`Flip light in ${room}!`}
    </button>
)

ReactDOM.render (
    <House/>,
    document.getElementById('root')
)

预期的结果：单击<room>按钮时，House组件的状态会发生变化，以反映房间内电灯开关的翻转（即，true点亮，false熄灭）。

我想知道应该????? 怎么做，而不是-如何将roomprop handler从给定RoomButton组件内部传递给函数？

尝试将其传入，并Maximum depth reached从React 得到一个错误。

ES6的答案将不胜感激，顺便说一句。

Answer 1

您可以尝试以下解决方案：

在flipSwitch将接受房间名称为参数，将使用一个回调（以检索当前状态的权值）更新状态

 class House extends React.component {
 ....

   flipSwitch = room => {
     this.setState(state => ({
        [room]: !state[room]
     });
   }

 ...
 }


const RoomButton = ({room, handler}) => (
  <button onClick={() => handler(room)}>
    {`Flip light in ${room}!`}
  </button>
);