Unstated (React) 中的条件语句

Question

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

我制作了一个使用 Unstated 显示注释的简单应用。

这是我的 NoteContainer：

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

如你所见，真的很简单，它只是改变状态中的 isDisplaying 属性这样我就可以在 Note.js 组件上使用它来显示标题和笔记的消息，就像这样:

class Note extends Component {
    state = {
        isShowing: false,
    }

    render() {
        if (this.state.isShowing) {
            return (
                <Subscribe to={[NoteContainer]}>
                    {noteContainer => (
                        <div className="container">
                            <p>{noteContainer.state.title}</p>
                            <p>{noteContainer.state.desc}</p>
                        </div>
                    )}
                </Subscribe>
            )
        }
        return (
                <Subscribe to={[NoteContainer]}>
                    {noteContainer => (

                        <div className="container">
                            <button className="btn btn-success" onClick={() => {
                                noteContainer.show();
                                this.setState({
                                    isShowing: noteContainer.state.isDisplaying,
                                })
                                console.log(this.state);
                            }}>
                                See Note!
                            </button>
                        </div>
                    )}
                </Subscribe>
            )
    }
}

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

但是，我得到的是它创建了另一个订阅组件，这似乎删除了 "See Note!" 按钮部分。这是结果的图片。

问题是我不能再次使用按钮来隐藏笔记信息，我显然使用了错误的订阅组件，但我想不出另一种方法来使用未声明的条件，所以任何帮助这将不胜感激。

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

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

如果有条件，我已经设法用内联解决了它。但是我对这个解决方案感到不舒服，我想知道如何实现一个完整的 if 条件，所以如果有人知道请发表评论！

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

Unstated (React) 中的条件语句

Conditionals in Unstated (React)

javascript

reactjs

jsx

unstated