Question

我想在页面加载时显示弹出窗口，但我不了解有关反应javascript的知识。我正在使用灯箱弹出窗口。它工作正常，但它的工作onclick功能。我需要在页面加载时打开弹出窗口。我的代码是： -

<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>

Answer 1

尝试创建自定义元素并在this.props.openLightbox

上添加方法componentWillMoutn

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

将此自定义元素放入<LightboxTrigger>

<LightboxTrigger>
    <ToggleButton />
</LightboxTrigger>

如何在反应js

1 个答案: