时间戳

首页 > 解决方案 > ReactJS 为什么我的 DOM / `display` 只渲染 'display: none'？

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

问题描述

让我有点发疯......我想单击一个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。虽然这有点刮擦桶。

标签： javascriptreactjs

解决方案

这段代码有几个问题：

1.

display: visible不正确，不会有任何效果（被浏览器忽略）。这里的正确值是display: block。

2.

您正在删除内容时showPreviewis false，所以display: none也没有效果。

3.

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

4.

的最大值opacity为1。

5.（可能）

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

推荐阅读