當狀態更改時，不顯示基准模式。 為什么它沒有通過？

Question

即使我將true屬性的布爾值傳遞給函數，模態也不會顯示。 似乎SuccessModal變為true，但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'導入{覆蓋，面板，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;