javascript - 在 React 中操作 HTML5 对话框

Question

我正在尝试创建一个右上角带有关闭图标的简单配置对话框，但想不出如何在 React 中处理它。在其他框架中，我可以简单地使用选择器，然后使用 .showModal()/close() 打开/关闭对话框。但是，我认为我们不允许或不建议在 React 中直接操作 DOM，所以我想知道在这种情况下什么是正确的方法。

我的项目大纲

App.js

class App extends Component {
  ...
  ...
  return(
    <div>
      <ConfigPage />
      <ConfigButton />
      <MainContents />
    </div>
  )
}

我想打开一个对话框，它是<ConfigPage /> , 按 <ConfigButton />我设置并通过按对话框上的图标关闭它。

config-page.js

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

Answer 1

HTML5 对话框也有一个 open 属性，对吗？您可以操纵此属性而不是调用显示/隐藏 -

class ConfigPage extends Component {
  ...
  ...
  return(
    <dialog open={this.state.showDialog ? 'open' : false}>
      <header>
        <div>
          <i onClick={someCallback}></i>               
        </div>
      </header>
      <section></section>
    </dialog>
  )
}

当你想显示/隐藏调用this.setState({showDialog: true})(或false)

这是带有概念验证的 js fiddle:https://jsfiddle.net/n5u2wwjg/193969/