使用 React 导出 javascript 函数

Posted 2023-03-07

【中文标题】使用 React 导出 javascript 函数

【英文标题】：export javascript function using React

【发布时间】：2015-05-15 09:27:35

【问题描述】：

我正在尝试为网站登录 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>

【参考方案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>
    );

【讨论】：

嗨，肖恩，我实施了您的建议，但仍然无法正常工作。其实我不删除LOGIN LISTENER 甚至都不收费。如果您有时间可以看一下，我将不胜感激。谢谢！

查看您更新的问题，您似乎将this.login 用引号括起来，这是错误的。当您实际上希望它是对 javascript 函数的引用时，在其周围加上引号会将其解释为字符串。将onClick="this.login"改成onClick=this.login，点击后应该会调用该函数。

我在复制粘贴时犯了一个错误。原始代码没有用引号括起来，但它仍然什么都不做。感谢您的帮助。

您是说如果您在login 函数中放置一个断点，单击按钮时它永远不会被命中？我们需要查看更多代码才能提供帮助，因为没有理由不工作，除非您还有其他事情要做。您可以尝试查看我对其他问题的回答，以了解可能出现的问题：***.com/questions/24335218/…