状态改变时，Rebass模式不显示。为什么它不是真的呢？

Question

即使我向function传递了一个true属性的布尔值，也没有显示模态。看起来SuccessModal是真的，但Overlay不是。为什么它不起作用呢？

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;

如果你需要更多的代码来调试，请让我知道！提前谢谢。

Answer 1

这是通过访问道具子对象来实现的。

从“react”导入React，{PropTypes}；从“rebass”导入{ Overlay，Panel，PanelHeader，PanelFooter，Text，//Close，Space }；

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;