小编bre*_*son的帖子

在react.js中,最好将超时引用存储为实例变量(this.timeout)还是状态变量(this.state.timeout)？

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.timeout); 
     }
    ...
})

要么

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.state.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening …

我试图通过使用mocha和酶来更新我的单元测试.我正在测试的代码是在ES6中,使用JSX和React.

我在测试脚本中无法让mocha在JSX上出错.

测试脚本:

import React from 'react';
import assert from 'assert';
import { shallow } from 'enzyme';
import SamplePageMain from '../SamplePageMain';

describe('<SamplePageMain />', () => {

    var samplePage = shallow(<SamplePageMain />);

    it('should render', function () {
        assert.notEqual(samplePage, null);
    });

});

gulpfile.js:

require('babel-core/register');

...

gulp.task('test', function() {
    return gulp.src('scripts/**/test/*.js', {read: false})
        .pipe(mocha());
});

输出是:

gulp test

[16:19:06] Using gulpfile ~/dev/bikini/gulpfile.js
[16:19:06] Starting 'test'...
[16:19:06] 'test' errored after 62 ms
[16:19:06] SyntaxError in plugin 'gulp-mocha'
Message:
        /Users/me/dev/bikini/scripts/components/test/samplePageMain.js:     Unexpected token (9:26)
Details:
    pos: …

我想更改SVG行的属性,并将过渡动画设置为新坐标.

我在这个例子中使用reactjs来改变y2的值:

<line stroke='green' x1='0' y1='50%' x2='100%' y2='25%'>

至

<line stroke='green' x1='0' y1='50%' x2='100%' y2='75%'>

用CSS喜欢

.myStuff * {
    transition: all 1s;
}

CSS转换是否可以在y2属性上工作？或者有没有办法在CSS中设置行的属性,如:

.myStuff line {
    y2: 25%;
}

(我知道不起作用)

我考虑过使用javascript,但这增加了复杂性

我考虑过使用SMIL,但我必须存储旧的和新的y2状态,我认为reactjs不允许使用animate元素.

我已经考虑过在我的线元素上使用变换,如果找不到更好的解决方案,我会沿着这条路走下去.我想避免数学和复杂性.

我试图将elm应用程序从0.18升级到0.19.

我遇到了这个错误 -

Detected errors in 1 module.                                         
-- BAD IMPORT ---------------------------------------- src/Views/Interaction.elm

The `Html.Events` module does not expose `onWithOptions`:

13| import Html.Events exposing (onWithOptions)
                                 ^^^^^^^^^^^^^
These names seem close though:

    onMouseEnter
    onMouseLeave
    onMouseOut
    onMouseOver

该文件显示,onWithOptions应该可用.

我的代码是

module Views.Interaction exposing (onClickNoBubble)

{-| Helper functions for page interactions.


# Helpers

@docs onClickNoBubble

-}

import Html
import Html.Events exposing (onWithOptions)
import Json.Decode as Decode


{-| Replicates the onClick function but prevents bubbling
-}
onClickNoBubble : msg -> Html.Attribute …

如果我在一行上有许多内联块元素,我希望能够以不同的方式设置包裹到下一行的元素的样式.

例如

<div class='wrapper'>
    <div style='display: inline-block; width: 500px'>...</div>
    <div style='display: inline-block; width: 500px'>...</div>
</div>

因此,当浏览器宽度<1000时,第二个孩子<div>可以具有不同的样式.

我知道我可以用js来做,但我试图避免它.我也知道我可以使用媒体查询,但我担心最小宽度截止可能与<div>包裹时不完全相同(我不知道它们的确切大小).

我已经使用模式和解析器设置了AppSync。我可以将模式导出到文件，但是看不到如何导出解析器。

我想将它们存储在文件中，以便对它们进行源控制。它们包含许多我不想丢失的SQL代码。

我有一个 graphql 端点：QueryDataForOptions

我想根据组件的optionsprop 多次调用它。可能有任意数量的选项。

我想做这样的伪代码，但钩子规则不允许这样做：

const MyComponent = (options) => {
  options.forEach(option => {
    const {data, loading, error} = useQuery(QueryDataForOptions, {variables: {option}})
  })

}

我也考虑过这个伪代码，但我不确定如何处理data被覆盖：

const MyComponent = (options) => {
  const [getOptions, {data, loading, error}] = useLazyQuery(QueryDataForOptions)
  options.forEach(option => {
    getOptions({variables: {option}})
  })
}

我知道正确的解决方案是更改 graphql 端点，但我想在客户端进行此更改。

如何多次调用同一查询？

我有一些代码，例如：

import { GoogleMap } from 'react-google-maps';

const GoogleMapContainer = () => {
    const zoomToBounds = React.useCallback(
        (map): void => map && bounds && map.fitBounds(bounds),
        [bounds]
    );


    <GoogleMap ref={zoomToBounds}>
        ...
    </GoogleMap>
}

GoogleMap当我测试时我试图开玩笑GoogleMapContainer

jest.mock('react-google-maps', () => ({
      GoogleMap: (props) => <div>{props.children}</div>,
}));

但是，我收到如下错误：

    Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

我无法使用，forwardRef因为笑话抱怨使用范围之外的函数。如果我尝试为 GoogleMap 创建模拟的基于类的组件，我会得到同样的错误。

我该如何解决该ref错误？

我希望对我的 React 组件进行一些性能改进。

如果我有一个组件，其名称如下：

    <MyComponent
        anObject={someObject}
        aFn={someFn}
        aValue={value}
    />

anObject仅当、aFn或aValue发生更改时，React 才会“重新渲染”该组件。如果我知道我的函数正在重新渲染，我如何知道这三个道具中的哪一个导致了它？

我知道我可以console.log aValue看看它是否会改变，但是对象和函数呢？它们可以具有相同的值，但引用不同的内存。我可以输出内存位置吗？

我有一个可选的String字段notes，有时为空。如果为空，我想插入null，否则我想插入字符串。

这是我的解析器-

{
    "version" : "2017-02-28",
    "operation": "Invoke",
        #set($id = $util.autoId())
        #set($notes = $util.defaultIfNullOrEmpty($context.arguments.notes, 'null'))

        "payload": {
          "sql":"INSERT INTO things VALUES ('$id', :NOTES)",
          "variableMapping": {
            ":NOTES" : $notes
          },
          "responseSQL": "SELECT * FROM things WHERE id = '$id'"
        }

}

有了这个graphql

mutation CreateThing{
  createThing() {
    id
    notes
  }
}

我得到-

{
  "data": {
    "createRoll": {
      "id": "6af68989-0bdc-44e2-8558-aeb4c8418e93",
     "notes": "null"
   }
 }

}

当我真的想要没有引号的null时。

有了这个graphql-

mutation CreateThing{
  createThing(notes: "Here are some notes") {
    id
    notes …

我正在运行一些 react-testing-library 测试并收到Did not retain recoil value on render, or committed after timeout elapsed. This is fine, but odd. undefined. 这是什么意思？我该如何解决？

我刚刚添加了一个新的反冲原子。

我正在使用后坐力 0.3.0。