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

【问题标题】：ReactJS Why is my DOM / `display` only rendering 'display: none'?ReactJS 为什么我的 DOM / `display` 只渲染 'display: none'？
【发布时间】：2019-01-11 20:36:04
【问题描述】：

这里让我有点发疯...... 我想单击一个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>

但即使我在单击按钮时可以看到状态发生变化，并且我已经通过将边框颜色链接到状态来成功更改边框颜色 - 出于某种原因将显示更改为无只是坚持。它不会离开它。

有什么想法吗？

更新（相当标准的切换处理程序）：-

 togglePreview = () => {

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

  }

感谢 v.much @AdrianoRepetti 提出 display: block 而不是 visible 的建议。不知道我从哪里接了display: visible。

如果其他人遇到这种情况，我还发现了一个使用 opacity: 10 vs opacity 0 的 hack。虽然这有点刮擦桶。

【问题讨论】：

@NewbieAid 可能是因为display: visible 无效（例如，尝试display: block）然后更改就会被忽略。
使用display: none 是没有用的，因为当this.state.showPreview 是false 时，<Preview /> 窗格会从 DOM 中完全移除，所以 <div className="preview-container"> 无论如何都是空的。
Lukas 是对的——这是一种反模式。如果您想隐藏元素（以在页面上保留其尺寸），请使用visibility: visible 和visibility: hidden。另请注意，不透明度是从 1 到 0，而不是从 10 到 0。
欢迎您。只是一个小提示：隐藏的 (display: none) 元素不会在可视 DOM 中呈现，而 opacity: 0 和 visibility: hidden 是，它们有助于整体布局。请注意区别，因为有时您可能想要使用display，而其他时候您可能想要使用visibility。另请注意，从性能的角度来看，您可能希望避免从 DOM 中频繁插入/删除（然后 this.state.showPreview && 可能会被省略）
与原始问题无关，但你可以用更简单的东西替换你的长 togglePreview 函数：this.setState(prevState => ({showPreview: !prevState.showPreview}));

标签： javascript reactjs

【解决方案1】：

这段代码有几个问题：

1.

display: visible 不正确，将不起作用（被浏览器忽略）。这里正确的值是display: block。

2.

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

3.

当 showPreview 为 false 时，你要求 React 渲染值 false。这是错误的，你会得到错误。

4.

opacity 的最大值为1。

5。（可能）

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

【讨论】：

1.

2.

3.

4.

5。 （可能）

5。（可能）