小编Lau*_*ass的帖子

我有一个非常简单的timeInterval observable,我想在不断开订阅者的情况下启动/停止传输(无论可观察的状态如何,都应该等待和等待).是可能的,如果是这样的话怎么样？

var source = Rx.Observable
  .interval(500)
  .timeInterval()
  .map(function (x) { return x.value + ':' + x.interval; })
  .take(10);

  var subscription = source.subscribe(
  function (x) {
     $("#result").append('Next: ' + x + ' ');
  },
  function (err) {
    $("#result").append('Error: ' + err);
  },
  function () {
    $("#result").append('Completed');
  });

一般评论:我见过的大多数例子都展示了如何定义观察者和订阅者.我如何影响现有对象的行为？

我试图了解 React 服务器组件以及如何在不使用 useState 和 useEffect 的情况下渲染组件状态。我创建了一个带有嵌入式客户端组件的服务器组件，两者都获取少量数据并显示为 JSON。

客户端组件按预期工作并呈现从 API 获取的 json 数据。

主客户端.tsx

import { useEffect, useState } from "react"

export default function Main() {
    let [data, setData] = useState(undefined);

    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    useEffect(()=>{
        fetchData().then(value => {
            setData(value);
            console.log("data", data)
        });
    }, [])

    return (<div className="component">
        <h1>Client Main</h1>
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
    </div>)
}

服务器组件不会重新渲染 …

我试图找到一个使用$ route的角度1.5路由示例.如果我使用比创建代码示例更高的角度版本,我已经看过JSFiddle示例.我找不到1.2以上的工作.理想情况下,我需要一个AngularJS 1.5的工作示例.

我已经尝试过这个例子:

var app = angular.module( "myApp", [] );

app.config( function ( $routeProvider ) {
  $routeProvider
  .when( '/this', { templateUrl: 'this.html' } )
  .when( '/that', { templateUrl: 'that.html' } )
  .when( '/other', { templateUrl: 'other.html' } )
  .otherwise( { redirectTo: '/this' } );
});

app.controller( 'MainCtrl', function ( $scope ) {
});

哪个失败了1.2(并且可能是上面的).

我想使用RXJS设置一个ORDERED数据流，该数据流以随机间隔（例如每1-5秒）发出一个数字，我想将其用作时间随机数据源来测试RXJS的其他部分。以下代码以随机顺序（由于延迟）生成项目，但我希望该顺序仅保留随机时间。

function randomDelay(bottom, top) {
  return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
}

var source = Rx.Observable
  .range(1, 10)
  .flatMap(function (x) {
    return Rx.Observable
      .of(x)
      .delay(randomDelay(1000,5000));
  })
 .timeInterval();

var subscription = source.subscribe(
  function (x) {
     $("#result").append('Next: ' +  JSON.stringify(x) +  '<br>');
  },
  function (err) {
     $("#result").append('Error: ' + err);
  },
  function () {
     $("#result").append('Completed');
  });

给我以下输出的变体：

Next: {"value":1,"interval":1229}
Next: {"value":2,"interval":321}
Next: {"value":4,"interval":645}
Next: {"value":5,"interval":28}
Next: {"value":9,"interval":728}
Next: {"value":10,"interval":269}
Next: {"value":3,"interval":107}
Next: {"value":6,"interval":265}
Next: …

这个问题与RXJS有关.我正在尝试调整github中的拖放示例,以便为一类div而不仅仅是单个元素ID. https://github.com/Reactive-Extensions/RxJS/blob/master/examples/dragndrop/dragndrop.html

简单的更改,给div一个类或ID不工作,我失去了拖动元素的能力

3个简单的变化:

HTML line 7 i.e. <div class="dragTarget">Drag Me!</div>
CSS line 1 i.e. .dragTarget { style attributes unchanged }
JS line 4 i.e var dragTarget = document.getElementsByClassName('dragTarget');

我不熟练知道这是否是RXJS中的错误或该示例不够概括.有关RXJS事件的文件表明这些变化应该足够了.任何帮助赞赏.谢谢.

我试图从官方文档中了解如何正确使用 SelectFromResult：

https://redux-toolkit.js.org/rtk-query/usage/queries#selecting-data-from-a-query-result

我已经扩展了 Pokemon 示例，以使用 SelectFromResult 检索以“saur”结尾的经过过滤的 Pokemon 列表，但输出会导致错误丢失并且 isLoading 数据

实时沙箱： https://codesandbox.io/s/rtk-query-selectfromresult-vvb7l

相关代码在这里：

端点使用transformResponse提取相关数据：

    getAllPokemon: builder.query({
      query: () => `pokemon/`,
      transformResponse: (response: any) => {
        console.log("transformResponse", response);
        return response.results;
      }
    })

如果我尝试 selectFromResult 并且我丢失错误和 isLoading 变量，则挂钩会失败，因为它们不再从挂钩返回。如果我注释掉 SelectFromResult 选项，它们就会正确返回。

export const PokemonList = () => {
  const { data, error, isLoading } = useGetAllPokemonQuery(undefined, {
    selectFromResult: ({ data }) => ({
      data: data?.filter((item: Pokemon) => item.name.endsWith("saur"))
    })
  });

  useEffect(() => {
    if (data) console.log("filtered result", data);
  }, [data]);

  return …

我试图从官方 TS 文档中理解混音。

https://www.typescriptlang.org/docs/handbook/mixins.html

我在这里设立了一个游乐场。

我的问题是：我如何定义jump和duck来操作Sprite中定义的x和y属性？

即在这个例子中，我希望使用jump()和duck()来操作Sprite类中的x和y。那可能吗？将 x 和 y 属性添加到可跳和可鸭子中似乎很麻烦且重复。

一般来说，如果没有混合类之间属性的交叉操作，我很难看到 TS mixin 的真实用例。

代码是：

(() => {
  // This can live anywhere in your codebase:
  function applyMixins(derivedCtor: any, constructors: any[]) {
    constructors.forEach((baseCtor) => {
      Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
        Object.defineProperty(
          derivedCtor.prototype,
          name,
          Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
            Object.create(null)
        );
      });
    });
  }

  // Each mixin is a traditional ES class
  class Jumpable {
    jump() {
      console.log("jump");
    }
  }

  class Duckable {
    duck() {
      console.log("duck");
    }
  }

  // Including the base
  class …

我安装了新的 CRA 模板，但无法在浏览器中看到文件更改的反映。我使用未修改的 CRA 安装通过 nginx 反向代理 React 应用程序（除了设置与标准 nginx websocket 代理配置相对应的 .env VAR PORT 之外，未进行修改）。我仍然看到持续存在的浏览器错误：

webpackHotDevClient.js:60 WebSocket connection to 'wss://react.syntapse.co.uk/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 301

.env 文件

PORT=3121

nginx配置

server {
    listen 80;
    server_name react.syntapse.co.uk;

    location /sockjs-node/ {
        proxy_pass http://0.0.0.0:3121/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location / {
        proxy_pass http://0.0.0.0:3121/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

我没有采取任何具体步骤来启用 …

我有一组复选框和一组 if radios，我想使用 React hook 表单进行验证，以确保如果提交时未选择任何复选框，则会生成错误消息。

我尝试过在他们的网站上尝试使用表单生成器，但我无法弄清楚如何将一组项目作为单个验证单元进行验证。

<div>
  <span>Option A <input type="checkbox" value="A" /></span>
  <span>Option B <input type="checkbox" value="B" /></span>
  <span>Option C <input type="checkbox" value="C" /></span>
</div>
<...output a validation error if one or more checkboxes hasnt been checked within the group>

<div>
  <span>Option A <input type="radio" value="A" /></span>
  <span>Option B <input type="radio" value="B" /></span>
  <span>Option C <input type="radio" value="C" /></span>
</div>
<...output a validation error if one or more radios hasnt been checked within the group>

这可能吗？有正确的方法吗？

感谢您的时间和关注。

我想了解打字稿装饰器。

在这个例子中，为什么decorator1()在应用于类方法时需要括号，而decorator2不需要？我对 TS 装饰器的了解还不足以区分这两种类型的装饰器，所以任何建议都是值得赞赏的。

https://codesandbox.io/s/typescript-decorator-forked-v3u6q?file=/src/index.ts

function decorate1() {
  console.log("decorate1(): factory evaluated");
  return function (
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    console.log("decorate1(): called");
  };
}

function decorate2(target, key, descriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    // Call the original method
    console.log("calling decorate2 function");
    const result = original.apply(this, args);
    console.log("decorate2 returned", result);
    return result;
  };
  return descriptor;
}

class ExampleClass {
  @decorate1()
  @decorate2
  method() {
    return "something";
  }
}

const example = new ExampleClass();
example.method();

我已经在 Next js 中设置了基本路由器，我希望多个页面共享一个组件，例如标头。每次加载新页面时都会重新加载共享组件。（如何）我可以重用组件，而无需在页面加载之间不必要地重新渲染它们吗？与 CRA + React-router 嵌套路由相比，这确实效率低下，消除了对任何形式的共享组件的需求。

沙多克斯在这里

共享组件代码如下：

import React, { memo } from "react";

export default function hello() {}

export const Header = memo(() => {
  return (
    <>
      <h1>Next js Shared component</h1>
      <p>{Math.random()}</p>
    </>
  );
});

我曾尝试将通用组件包装在备忘录中，以避免重新渲染，但这不起作用。Next JS 有没有办法在页面之间共享组件？

我需要将项目连接到存储在 React 组件状态中的数组。我有一个关于 stackblitz 的例子，我不明白为什么数组没有增长，因为我使用扩展运算符添加元素以连接到现有数组。任何帮助表示赞赏

链接：https : //stackblitz.com/edit/react-usestate-example-ebzt6g?file=index.js

import React from 'react';
import { useState, useEffect } from 'react';
import { render } from 'react-dom';
import './style.css';

const App = () => {

    const [name, setName] = useState('React');
    const [coords, setCoords] = useState([]);

    const success = (position) => {
        // setCoords(coords.concat(position.coords))
        setCoords([
            ...coords,
            position.coords
        ])
        console.log("success! position=", position);
    }

    useEffect(() => {
        console.log("useEffect -> coords =", coords);
    });

    useEffect(() => {
        setInterval(() => {
            success({coords : {latitude: Math.random()*51, longitude: …