如何顯示在頁面加載反應js lightbox lightbox彈出

我想顯示彈出頁面加載，但我不知道反應的JavaScript。我正在使用Lightbox彈出窗口。其工作正常，但其工作onclick功能。我需要在網頁加載時打開彈出窗口。我的代碼是： -如何顯示在頁面加載反應js lightbox lightbox彈出

<html> 
    <head> 
    <script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script> 
    <script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js'></script> 
    <script type="text/jsx" src='js/react-lightbox.jsx'></script>  
</head> 
<body> 
    <div id='react-canvas'></div> 
    <script type="text/jsx"> 
     /** @jsx React.DOM */ 
     React.renderComponent(
      <Lightbox> 
       <LightboxTrigger> 
        <a href='javascript:void(0)'>Click me to open!</a> 
       </LightboxTrigger> 
       <LightboxModal> 
        <div> 
         <h1>This is the basic usage!</h1> 
         <p>Good luck :D</p> 
        </div> 
       </LightboxModal> 
      </Lightbox>,   

      document.getElementById('react-canvas') 
     ); 
    </script> 
</body> 
</html>

來源

2017-02-22 Ranjeet singh

你能提供的鏈接燈箱文件，你指的是？ –

@MayankShukla這是鏈接： - http://github.com/howtomakeaturn/React-Lightbox –

你正在使用的燈箱實現是非常古老的，最近一次更新是2年前。嘗試新的圖書館可能[this]（https://github.com/fritz-c/react-image-lightbox）。 – Abhishek

嘗試創建custome元素和componentWillMoutn

var ToggleButton = React.createClass({ 
     componentWillMount(){ 
      this.props.openLightbox(); 
     } 
     render() { 
      return(<button onClick={this.props.openLightbox}>Open Lightbox</button>); 
     } 
    });

添加方法this.props.openLightbox並把這個自定義元素爲<LightboxTrigger>

<LightboxTrigger> 
    <ToggleButton /> 
</LightboxTrigger>

來源

2017-02-22 09:23:20

這是行不通的;（ –

任何其他示例？ –

它不是強制使用燈箱，我需要使用反應JS彈出頁面加載？ –

如何顯示在頁面加載反應js lightbox lightbox彈出

回答

相關問題