ReactJS为什么我的DOM /`display`只渲染'display：none'？

Question

让我有点疯了... 我想单击一个Preview按钮，它会为文本输入生成一个“预览窗格”。我以为我会把div的内联样式链接到React状态。

<div className="preview-container" style={{ display: this.state.showPreview ? 'visible' : 'none' }}>
    {
        this.state.showPreview && 
          <Preview
            htmlString={value.toString('html')}
            showOrHidePreview={this.togglePreview}
          />
    }

</div>

但是，即使单击按钮后我看到状态发生变化， AND 我已经通过将边框颜色链接到状态成功地更改了边框颜色-出于某种原因，将显示内容更改为不粘手。它不会离开它。

有什么想法吗？

已更新（非常标准的切换处理程序）：-

 togglePreview = () => {

    if (this.state.showPreview === false) {
      this.setState({
        showPreview: true,
      })
    } else {
      this.setState({
        showPreview: false,
      })
    }

  }

感谢v.much @AdrianoRepetti提出的建议display: block，而不是visible。不确定我从哪里捡来display: visible。

如果其他任何人碰巧遇到这种情况，我也发现了一个使用不透明度的黑客：10 vs不透明度0。尽管那有点令人费解。

Answer 1

此代码存在几个问题：

1。

display: visible不正确，将无效（被浏览器忽略）。正确的值是display: block。

2。

当showPreview为false时，您正在删除内容，因此display: none也无效。

3。

当showPreview为false时，您要求React呈现值false。这是错误的，您会得到错误。

4。

opacity的最大值为1。

5。 （可能）

showPreview的初始值是多少？如果为undefined，您的切换会将showPreview设置为false，给您的印象是它根本没有做任何事情。