Durum değiştiğinde rebass modal göstermiyor. Neden doğru geçmiyor?

Question

İşlev için gerçek öznitelik bir boole geçirdiğim halde model görüntülenmiyor. SuccessModal'ın doğru olduğu anlaşılıyor ama Overlay çalışmıyor. Nasıl oluyor da çalışmıyor?

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; 

Hata ayıklamak için daha fazla kod gerekiyorsa lütfen bana bildirin! Şimdiden teşekkürler.

Answer 1

Bu, çocuklara erişerek çalışır.

import React, {PropTypes} 'react' den; ithalat { Yerleşimi, Paneli, PanelHeader, PanelFooter, Düğme, Metin, // Yakın, Uzay } 'rebass' dan;

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;