未声明（反应）中的条件

Question

我正在学习在我的React应用中实现Unstated。

我制作了一个简单的应用，该应用使用“未声明”状态来显示注释。

这是我的NoteContainer：

January 2018

如您所见，这确实很简单，只需更改状态中的isDisplaying属性，这样我就可以在Note.js组件上使用它来显示标题和注释消息，如下所示：

class NoteContainer extends Container {
    state = {
        title: 'My Note',
        desc: 'This note state is managed with unstated',
        isDisplaying: false,
    }

    constructor() {
        super()
        this.show = this.show.bind(this);
    }

    show() {
        this.setState({ isDisplaying: !this.state.isDisplaying })
        console.log(this.state);
    }
}

所需功能是，当我单击“请注意”时！按钮，它在按钮上方显示标题的标题和注释说明，如果再次单击它，则将其隐藏。

但是，我得到的是它创建了另一个“订阅”组件，这似乎删除了“请参见注释！”。按钮部分。这是结果的图像。

问题在于我无法再次使用该按钮来隐藏便笺信息，显然我使用了订阅组件，但是我无法找到另一种使用未声明条件的条件的方法，因此对此的任何帮助都会不胜感激。

提前谢谢，祝您度过愉快的一周！

Answer 1

这是一种反模式：

this.setState({ isDisplaying: !this.state.isDisplaying })

先检查然后设置状态：

let answer = this.state.isDisplaying ? true : false
this.setState({isDisplaying: answer})

或使用prevState变量

this.setState((prevState, props) => ({
  isDisplaying: prevState.isDisplaying ? true : false
}));

Answer 2

如果有条件的话，我已经设法用内联解决了。 但是我对此解决方案感到不舒服，我想知道如何在有条件的情况下实施完整的解决方案，所以如果有人知道，请发表评论！

render() {
        return (
            <Subscribe to={[NoteContainer]}>
                {noteContainer => (
                    <div className="container">
                        <p>{noteContainer.state.isDisplaying ? noteContainer.state.title : ''}</p>
                        <p>{noteContainer.state.isDisplaying ? noteContainer.state.desc : ''}</p>
                        <button className="btn btn-success" onClick={() => {
                            noteContainer.show();
                        }}>
                            See Note!
                        </button>
                    </div>
                )}
            </Subscribe>
        )
    }