如何在Reactjs中创建自定义模态

Question

我们需要在Reactjs中创建一个带有叠加背景的模态对话框作为React组件。当用户单击叠加时，应该关闭模态。我们需要以可重用的React组件的方式创建模态。 有人请我引导我回家

Answer 1

我强烈建议您浏览React-modal的源https://github.com/reactjs/react-modal，以了解如何“实现”自己的。

我本人从头开始执行这种自定义模态的方法，我必须建议简单地引入react-modal，而不是尝试重新发明同一个轮子[我从那以后替换了使用react-modal的本地实现]。 我已经尝试了一些不同的React modal软件包，并且react-modal是完全可定制的，经过战斗测试的，并且具有出色的API。

我在这里回答了几乎相同的问题： 如何：ES6 React Modal和这里：带有更多想法/示例/链接的React条件渲染模式 。

Answer 2

仅作为替代途径，您可以使用新的<dialog>元素，浏览器支持较低（ http://caniuse.com/#search=dialog ），但是使用polyfill可以解决此问题。 但这为创建对话框提供了非常简单且可扩展的方法，请参见此处的演示。