今天码代码的时候用到了react + taoro ui,taro ui的modal,但是用的时候无论怎么用isOpened控制显隐,对话框总是显示,即使isOpened是false,并且完全没有官网示例的样式。
先说下用法吧,和官网用法一样即可,因为层级非常高,所以写在那个地方都可以。
看下示例代码(复制的官网的),visible为布尔值true或者false
<AtModal isOpened={visible}>
<AtModalHeader>标题</AtModalHeader>
<AtModalContent>
这里是正文内容,欢迎加入京东凹凸实验室 这里是正文内容,欢迎加入京东凹凸实验室
这里是正文内容,欢迎加入京东凹凸实验室
</AtModalContent>
<AtModalAction>
<Button>取消</Button> <Button>确定</Button>
</AtModalAction>
</AtModal>
就是这段代码,以为会和官网有一样的效果,但是却出现了下面的情况:
不仅样式全无乱七八糟,且总是显示(无论isOpened是true或false);同时还没有层级,写在哪里就在那里出现。
这个问题困扰了我一整天,最后终于整明白了,罪魁祸首就是没有引入taro的样式(对于这点很奇怪,其他的组件比如AtButton没有引入组件都可以正常显示,modal却不行),引入下面这行代码,就可以正常显示了。(直接在相关页面引入就行了,不用管路径什么的)
import 'taro-ui/dist/style/index.scss';
现在来看一下好不容意得到的正常的样式: