[英]Rebass modal not showing when state is changed. Why is it not passing true?
The modal is not showing even though I passed a boolean of true attribute to function. 即使我将true属性的布尔值传递给函数,模态也不会显示。 It seems that SuccessModal turns true but Overlay does not.
似乎SuccessModal变为true,但Overlay却没有。 How come it's not working?
怎么不起作用?
import React, {PropTypes} from 'react';
import {
Overlay,
Panel,
PanelHeader,
PanelFooter,
Button,
Text,
//Close,
Space
} from 'rebass';
function SuccessModal ({modalOpen}) {
return (
<Overlay
open={modalOpen}
>
<Panel theme="success">
<PanelHeader>
Wicckkkeedd!
<Space auto />
/>
</PanelHeader>
<img
src='http://lorempixel.com/512/384/cats'
style={{
maxWidth: '100%',
height: 'auto'
}} />
<Text>
<b>Panel:</b> Something laid as a covering something else
</Text>
<PanelFooter>
<Space auto />
<Button
theme='success'
children='Meow!'
/>
</PanelFooter>
</Panel>
</Overlay>
);
}
export default SuccessModal;
If you need more code to debug please let me know! 如果您需要更多代码进行调试,请告诉我! Thanks in advance.
提前致谢。
This works by accessing props children. 这可以通过访问道具儿童来实现。
import React, {PropTypes} from 'react'; 从'react'导入React,{PropTypes}; import { Overlay, Panel, PanelHeader, PanelFooter, Button, Text, //Close, Space } from 'rebass';
从'rebass'导入{覆盖,面板,PanelHeader,PanelFooter,按钮,文本,//关闭,空格};
function SuccessModal ({modalOpen}) {
return (
<Overlay
open={modalOpen.open}
>
<Panel theme="success">
<PanelHeader>
Wicckkkeedd!
<Space auto />
/>
</PanelHeader>
<img
src='http://lorempixel.com/512/384/cats'
style={{
maxWidth: '100%',
height: 'auto'
}} />
<Text>
<b>Panel:</b> Something laid as a covering something else
</Text>
<PanelFooter>
<Space auto />
<Button
theme='success'
children='Meow!'
/>
</PanelFooter>
</Panel>
</Overlay>
);
}
export default SuccessModal;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.