小编Mar*_*ram的帖子

如何在Gatsby.js中为body标签添加动态类?

显然,这不是一件容易的事,html.js因为默认情况下模板文件中唯一改变的是头元标记和内容.

元标记由Helmet组件({head.title.toComponent()}{head.meta.toComponent()})处理,模板内的HTML更改由React管理.(<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)

然而,body标签超出了React的范围,这就是为什么当我从一个页面导航到另一个页面时,我无法弄清楚如何即时更改它.这正是我需要的,因为我想为每个页面应用不同的身体背景.

我知道我可以通过使用exports.onRouteUpdatein 来解决这个问题gatsby-browser.js,但是我希望即使在浏览器中禁用了JS,该类仍然存在.意味着即使我没有bundle.js文件导出,只是生成静态网站HTML,我希望它在那里.

javascript reactjs gatsby

12
推荐指数
3
解决办法
6211
查看次数

CSS3旋转 - 在Firefox和Safari中呈现问题

我正在尝试使用CSS3属性»旋转«旋转一段简单的文本,精确度为1.5度.

  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
Run Code Online (Sandbox Code Playgroud)

Chrome(v18)的结果看起来不错,在Firefox(v10)和Safari(5.1.5)中,但是我的结果很难看.

我使用的是使用@ font-face实现的字体,但是使用Arial我仍然会遇到问题(至少在Firefox中).见下面的例子.

真正奇怪的是,在Safari中切换到系统字体(Arial)可以解决问题,而在Firefox中问题仍然存在.

任何帮助,解决方法或黑客将不胜感激.

1)Chrome 18/font-family:Calibri/alignment OK

2)Firefox 10/font-family:Calibri/alignment丑陋

3)Firefox 10/font-family:Arial/alignment仍然很难看

4)Safari 5.1.5/font-family:Calibri/alignment丑陋

5)Safari 5.1.5/font-family:Arial/alignment OK

到目前为止,我已经找到了以下线程,但没有一个给出如何解决问题的解释:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3错误 - 使用转换时的问题:旋转规则(Safari + Firefox)

CSS变换旋转字母对齐

我也曾尝试设置DirectWrite的变量(改变字体渲染),在本教程中描述:http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox /,但结果是一样的.

firefox transform rotation css3

11
推荐指数
1
解决办法
6036
查看次数

IE7 - setAutoGrow不起作用

我在tab的iFrame中创建了一个facebook应用程序.

我正在使用Javascript SDK的setAutoGrow函数来使iFrame扩展直到内容结束.

根据我的观察,setAutoGrow函数在IE7中不起作用,我无法弄清楚原因.所有其他浏览器(包括IE8和9)都正常工作.

出于测试目的,我创建了一个1500px高的渐变.

用于1500px高度测试的示例梯度

举个例子,我会在Chrome中发布它的样子.如您所见,渐变可以滚动到结尾(红色):

iFrame选项卡内的渐变在普通浏览器中按预期工作

现在,IE7中发生了什么.iFrame的默认高度为800px(在应用程序设置中定义).您可以看到它停在"绿松石",并且setAutoGrow函数不会将其扩展到所需的高度(1500px).

iFrame选项卡内的渐变在IE7中不会扩展

我的CSS的重要部分如下:

body, html { 
    overflow: hidden;        
    margin: 0; padding: 0;
}

    #wrapper {
        margin: 0 auto;
        width: 810px;    
    }

        #content {
          background: url(../img/bg.jpg) top left no-repeat;
          height: 1500px;
        }
Run Code Online (Sandbox Code Playgroud)

这是我在关闭的body-tag之前和fb-root标签之后放置的javascript片段:

window.fbAsyncInit = function() {

    FB.init({

        appId      : '...',
        channelUrl : '...',
        status     : true,
        cookie     : true,
        xfbml      : true

    });

    FB.Canvas.setAutoGrow();

};
Run Code Online (Sandbox Code Playgroud)

我发现了一个可以追溯到8月1日的错误报告,该报告已被FB关闭:https://developers.facebook.com/bugs/209607222498543? broowse = search_5009002cb69058a73627413

我已经阅读并应用了以下主题的提示: Facebook iframe FB.Canvas.setAutoGrow在初始加载后不会自动增长?

......似乎没有什么能解决这个问题.

有没有人有一个明显的暗示,我监督的东西,或这个问题的简单解决方案/解决方法?

当我使用IE7 DebugBar时,我注意到加载名为"dimension_context.php"的URL时出现问题.我会附上截图.

IE7 DebugBar加载问题

css facebook internet-explorer-7

11
推荐指数
1
解决办法
1155
查看次数

使用jasmine-node测试nodejs中的异步mongodb调用

我正在使用jasmine-node对我的nodejs函数运行测试.作为nodejs和mongodb的新手,我遇到的第一件事就是测试一些数据库调用,由于nodejs的异步特性,我立即陷入困境.

我想做的是:

1)添加一个add函数以向mongodb表添加新条目

2)从该函数接收状态字符串以验证操作的状态

以下是我的规范代码.在beforeEach通话中,我初始化数据库.正如您在实现中所看到的,它只被实例化一次,因为它询问它是否已经存在.

var mongo = require('../mongo.js');

describe('mongo', function() {

    // generate a random number in order to test if the written item and the retrieved result match
    var randomNumber = Math.random();

    var item = {
        'cities': {
            'london': randomNumber
        }
    };

    beforeEach(function() {

        mongo.init();

        waitsFor(function() {
            return mongo.getCollection();
        }, "should init the database", 10000);

    });

    it('should return "added" after adding an item to the database', function() {

        var result;

        waitsFor(function() {
            result = …
Run Code Online (Sandbox Code Playgroud)

mongodb node.js jasmine-node

8
推荐指数
2
解决办法
4995
查看次数

在 Jest 中异步测试 React Navigation 5:NavigationContainer 导致控制台错误

我正在使用react-native-testing-libraryreact-navigation从 4升级到 5 后,我按照以下说明进行操作:https : //callstack.github.io/react-native-testing-library/docs/react-navigation升级了我的大部分测试套件。

到现在为止还挺好。这里的关键基本上是将您的测试包装在一个中,NavigationContainer以便我的组件可以访问以前来自react-navigation-hooks.

当我的测试是同步的时,这很好用,但是一旦我将async关键字添加到测试函数中,我就会收到以下警告:

console.error
    Warning: An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more …
Run Code Online (Sandbox Code Playgroud)

reactjs jestjs react-native react-navigation react-navigation-v5

6
推荐指数
1
解决办法
1981
查看次数

PyMongo导入连接 - 导致ImportError

我正在调用以下简单脚本通过Python连接到mongo数据库.

这是10gen教育课程M101 - MongoDB for Developers的一个例子,根据论坛,我不是唯一有这个问题的人.

import pymongo

from pymongo import Connection
connection = Connection('localhost', 27017)
Run Code Online (Sandbox Code Playgroud)

按照这里描述的那样用pip安装了pymongo ,一切正常.现在,当我尝试导入Connection类时,它给出了以下错误:

ImportError: cannot import name Connection
Run Code Online (Sandbox Code Playgroud)

到目前为止,我已经查看了以下线程: pymongo已安装但导入失败

但它不适用于我的环境,因为我使用的是Python 2.7.1而且我使用的是Mac OS而不是CentOS.我也对谷歌进行了一些研究,但到目前为止我发现的唯一一件事是验证PyMongo是否已正确安装,我已经完成并返回:

Requirement already satisfied 
Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激,以便继续前进.提前致谢.

python import mongodb pymongo

4
推荐指数
1
解决办法
7352
查看次数