使用 React 导出 javascript 函数

Question

我正在尝试为网站登录 Facebook。我发布的是一段带有渲染函数的 js 文件，它返回这个 html 代码：

var hellojs = require('./hello.js');

// See what hello.js does: http://adodson.com/hello.js/demos/profile.html#helloapi-me-
//It basically prompts the facebook window to sign up. 
var React = require('react');

var provide rs = {
facebook : 'XXXXXXXXXXXXXXX',
twitter  : 'XXXXXXXXXXXXXXX',//I have registered my app, XX.. is just for privacy. 
google   : 'XXXXXXXXXXXXXXX'
};
//LISTENER FOR LOGIN

hellojs.hello.on('auth.login',function(auth){
    hellojs.hello(auth.network).api('/me').then(function(response){
    var object = {};
    debugger;
    if (auth.network === 'twitter' || auth.network === 'facebook'){
        object.username = response.name;
        object.providerId = response.id.toString();
        object.thumbnail = response.thumbnail;
    }
    object.providerType = auth.network;
    sessionActions.authenticated(object);
   });
});
/*Sign Up component*/
login: function(event){
    var object = {};
    var provider = event.currentTarget.name;
    object[provider] = providers[provider];

    hellojs.hello.init(object,{
        'redirect_uri' : 'localhost',
        'oauth_proxy'  : 'https://auth-server.herokuapp.com/proxy',
        scope: 'publish_actions'
    });
    hellojs.hello.login(provider);
},
render: function() {
    .....
    return (
        <div className="signup col-sm-4">
            <form className="form-horizontal" role="form" id="login-form">
                .....
                <div className="form-group">
                    <div className="col-sm-offset-2">
                        <button onClick={this.login} 
                        class='zocial facebook'>Sign in with Facebook</button> 
                    </div>      
                </div>
            </form>
        </div>
    );

当我编译并单击“使用 Facebook 登录”按钮时，没有任何反应。我有点困惑，因为我尝试了以下简单的 html 文件，并且效果很好：

<script> src='hello.js'></script>
<button onClick="{this.login}">Sign in with Facebook</button>

Answer 1

我认为您的外壳有问题。将 onclick 更改为 onClick。 JSX 变成了 javascript，所以大小写很重要。

这仍然可能不起作用，因为hello 不在全局范围内，它可能需要在 HTML 元素中执行。相反，向您的组件添加一个调用hello.hello() 的方法。

doLogin: function() {
    hello.hello('facebook').login()
},
render: function() {
    .....
    return (
        <div className="signup col-sm-4">
            <form className="form-horizontal" role="form" id="login-form">
                .....
                <div className="form-group">
                    <div className="col-sm-offset-2">
                        <button onClick={this.doLogin} 
                        class='zocial facebook'>Sign in with Facebook</button> 
                    </div>      
                </div>
            </form>
        </div>
    );