小编ita*_*fna的帖子

我正在寻找一个 RxJS 运算符（或运算符组合），它可以让我实现这一目标：

1. 由可观察对象触发的每个事件都应按其触发顺序进行处理（不得跳过、限制、消除任何值）。
2. 我应该能够定义处理两个后续事件之间的设定间隔。
3. 如果当前没有处理先前的事件，则应立即处理下一个事件（无延迟）。

我创建了以下示例，希望能让这一点更清楚：

import { Component, OnInit } from "@angular/core";
import { Subject } from "rxjs";
import { delay } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  counter = 1;
  displayedValue = 1;

  valueEmitter = new Subject<number>();
  valueEmitted$ = this.valueEmitter.asObservable();

  ngOnInit() {
    // I want to allow each incremented value to be displayed for at least 2 seconds
    this.valueEmitted$.pipe(delay(2000)).subscribe((value) => {
      this.displayedValue = value;
    }); …

我有一个基于工作类的Accordion组件的实现，我正在尝试重构以使用新的hooks api。

我的主要挑战是找到一种仅重新渲染切换后的方法，<AccordionSection />同时防止<AccordionSection/>每次更新父级的状态<Accordion/>（跟踪其状态中的打开部分）时重新渲染所有其他组件的方法。

在基于类的实现中，我设法实现了这一点，方法是使<AccordionSection />a PureComponent，通过使用API 的高阶组件将isOpenand onClick回调传递给它context，以及将这些回调保存在父<Accordion/>组件的状态下，如下所示：

this.state = {
      /.../
      onClick: this.onClick,
      isOpen: this.isOpen
    };

据我所知，它保留了对它们的引用，因此阻止了在每次<Accordion />更新时将它们创建为新实例。

但是，我似乎无法将其与基于钩子的实现一起使用。

我已经尝试不成功的一些事情：

1. 用memo- 包裹“手风琴”部分，包括第二个回调参数上的各种渲染条件。

2. 用onClick和包装回车isOpen符useCallback（似乎不起作用，因为它们具有在每个<Accordion/>渲染器上更新的依赖项）

3. 将onClick和保存isOpen到这样的状态：const [callbacks] = useState({onClick, isOpen})然后将callbacks对象作为传递ContextProvider value。（似乎错了，没用）

这是对基于工作类的实现的引用： …

使用framer-motion，我遇到一个问题，即更新我传递custom给motion.div变体的道具的对象不会触发预期的样式更改。

我创建了以下沙箱来演示该问题：

https://codesandbox.io/s/framer-motion-stale-custom-fibp5?file=/src/App.js

我的期望是，当我切换主题时 - 圆圈的开/关颜色将立即根据新主题而改变。（从黑/白到深蓝/黄，反之亦然）。

但是，主题更改仅在动画值更改后才会应用（状态从“打开”更改为“关闭”等），因此当我切换主题时，我会显示“陈旧”主题值，直到我也切换状态（开/关）。

任何帮助将不胜感激。

我正在尝试使用 D3.js 创建一个条形图。条件是 Bar 应该具有固定的宽度和条形之间的填充，并且它应该绘制在网格线的中心。

工具提示应该在点击时出现一条垂直线

我能够创建带有绘制条的网格线，不知何故 rx,ry 从两侧四舍五入。我怎样才能达到同样的结果。

var rectCluster = svg.selectAll(".bar")
                    .data(data);

                rectCluster
                    .enter().append("rect")
                    .attr("class", function(d) {
                        return "bar";
                    })
                    .attr(attrs)
                    .attr({ry : (20), rx : 20 })
                    .attr("x", function(d) { return x(d.text); })
                    .attr("y", function(d) {
                        return height;
                    })
                    .style("fill", function(d) {
                        return color(d.text);
                    })
                    .attr("width", x.rangeBand())
                    .attr("height", 0)
                    .transition()
                    .duration(animationDelay)
                    .delay(function(d, i) {
                        return i * animationDelay;
                    })
                    .attr("y", function(d) { return y(d.score); })
                    .attr("height", function(d) { return height - y(d.score) });

                    var attrs = { …

有没有办法定义一个 Typescript interface，它允许对象中的 2 个可选键之一或没有它们，但不能同时允许两者？

这是我试图实现的简化示例：

const example1 = { foo: 'some string' }; //should pass - can have only "foo: string"

const example2 = { bar: 42 }; // should pass - can have only "bar: number"

const example3 = {}; // should pass - both foo and bar are optional

const example4 = { foo: 'some string', bar: 42 }; // should throw a Typescript error - can't have both foo …