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

Question

Driving me a bit nuts here... I want to click a Preview button and it generates a Preview Pane for text input. I thought i'll get the div's inline-style linked to React state.

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

</div>

But even though i can see state changing when i click the button, AND i've successfully changed a border colour by linking it to state - for some reason changing display to none just sticks. it wont move off it.

Any ideas?

Updated (fairly standard toggle handler):-

 togglePreview = () => {

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

  }

Thanks v.much @AdrianoRepetti for the suggestion of display: block rather than visible . Not sure where i picked up display: visible from.

If anyone else happens across this, i also found a hack using opacity: 10 vs opacity 0. Though that was scraping the barrel a bit.

Answer 1

There are several issues with this code:

1.

display: visible is incorrect and will have no effect (ignored by browser). The correct value here is display: block .

2.

You are removing the contents when showPreview is false , so display: none has no effect either.

3.

When showPreview is false you are asking React to render the value false . This is wrong, and you will get error.

4.

The max value of opacity is 1 .

5. (potentially)

What is the initial value of showPreview? If undefined , your toggle will set showPreview to false , giving you the impression that it didn't do anything at all.