小编mar*_*lle的帖子

我正在阅读这篇文章，但不确定我是否理解最终的钩子是如何工作的。

这是代码：

const useAnimationFrame = (callback) => {
  const requestRef = useRef();
  const previousTimeRef = useRef();

  const animate = (time) => {
    if (previousTimeRef.current !== undefined) {
      const deltaTime = time - previousTimeRef.current;
      callback(deltaTime);
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []);
}

并以这种方式使用例如：

const [count, setCount] = useState(0);

useAnimationFrame((deltaTime) => {
  setCount((prevCount) => {
    return prevCount + 1;
  });
});

好吧，目标是有一个每帧递增的数值。

我可以解释运行这段代码会发生什么：

1. 该组件创建一个本地状态useState(0)

2. 然后 …

我正在创建我的第一个 Typescript 库，它导出一些函数。

该项目的结构是这样的：

myProject
  |_ assets/
    |_ logo.png
  |_ coverage
    |_ ...some stuff
  |_ demo
    |_ index.html
    |_ index.ts
    |_ style.css
  |_ dist
    |_ ...
  |_ dist-demo
    |_ ...
  |_ node_modules
  |_ src
    |_ lib/
      |_ types.ts
      |_ index.ts
    |_ index.ts
  |_ .gitignore
  |_ package.json

index.ts是：

export { sayHello } from './lib'

lib/index.ts是：

export function sayHello() {
  console.log('Hello')
}

（显然，这只是一个简单的例子，重要的是结构）。

我决定创建一个演示页面：我创建了演示文件夹，并在其中创建了index.html, index.ts, style.css。

然后我决定使用 Parcel 作为捆绑器。请记住，我是一名初级开发人员。

所以我的package.json是：

{
  "name": "myLib",
  "version": …

我正在尝试使用 React 和 Leva js 创建一个简单的应用程序。

基本上有一个项目数组，每个项目都有一个名称和一个数字数组。Leva 面板包含两个选择，用户可以从项目数组中选择两个项目。

如果两个选定的项目具有相同的长度，则可以，否则应用程序应返回错误。

这里是主要代码，这里是一个工作演示。

应用程序.jsx：

export const App = () => {
  const [haveSameNumberOfValues, setHaveSameNumberOfValues] = useState(true);
  const [showResult, setShowResult] = useState(haveSameNumberOfValues);

  const { startValuesName, endValuesName } = useControls({
    startValuesName: {
      value: VALUES[0].name,
      options: VALUES.map((d) => d.name)
    },
    endValuesName: { value: VALUES[1].name, options: VALUES.map((d) => d.name) }
  });

  useEffect(() => {
    const startValuesItem = getValuesFromName(startValuesName);
    const endValuesItem = getValuesFromName(endValuesName);
    const startValues = startValuesItem.values;
    const endValues = endValuesItem.values;

    const values = [startValues, …

我有一个层将 Geojson 源中的多边形要素渲染为填充区域。以下是其中一项功能的示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 12345,
        "name": 'exampleName',
        "hasCities": true | false,
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[...], [...]]
      }
    }, {...}
  ]
  "properties": {
    "parent_name": "parent1",
    "parent_id": 23,
  }
}

我想达到这个填充不透明度逻辑：

const isRed = true | false
const redOpacity = 0.5
const notRedOpacity = 0.8

if (hasCities) {
  opacity = 0
} else if (isRed) {
  if(zoom <= 14) // use linear interpolation
    opacity = redOpacity
  else if(zoom >= …

我正在尝试创建一个具有书籍布局的页面，因此带有一些使用的选项卡的页面可以一次展开一个。

这是一个工作示例：https://codesandbox.io/s/book-layout-l28gh ?file=/src/App.js:0-1419

import { useState } from "react";

const dataset = [
  { name: "A section", description: "page A" },
  { name: "B section", description: "page B" },
  { name: "C section with long title", description: "page C" },
  { name: "D section", description: "page D" }
];

export default function App() {
  return <Page />;
}

function Page({}) {
  const [openSection, setOpenSection] = useState(0);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh"
      }} …

有没有办法禁用下拉列表？我没有找到任何可以帮助我的道具。

特别是，当用户选择超过 5 个元素时，我想禁用下拉列表。

我创建了这个codesandbox。它实际上不起作用，因为它没有链接到状态：

const limit = 3;
const defaults = [colourOptions[2], colourOptions[3]];

export default () => (
  <Select
    defaultValue={defaults}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
    isSearchable={defaults.length < limit}
    // disableDropdown={defaults.length > limit} // <-- something like this
  />
)

这是我第一次使用 Svelte，我正在尝试构建一个商店。我在这里阅读了文档，但有些东西我不清楚。抱歉，如果这是一个愚蠢的问题。

基本上我创建了一个可读存储（可读，因为它不会改变）和一个派生值。现在我需要创建一个带有参数的派生函数。

这是我的代码

stores.js：

import { derived, readable, writable } from 'svelte/store'

export const dataset = readable([1, 3, 2, 5, 4, 2]);

export const sortedDataset = derived(dataset, ($dataset) => {
  return $dataset.sort();
})

export function getCounterValue(value) { // <- how to implement something like this?
    return dataset.filter((d) => d === value).length;
}

App.svelte

<script>
    import {dataset, sortedDataset, getCounterValue} from './stores.js'

    console.log('dataset:', $dataset);
    console.log('sorted dataset:', $sortedDataset);
    console.log('2 counter:', getCounterValue(2)); // <- how can I call …

我正在尝试使用 Svelte，这是我第一次，很抱歉这个问题可能很愚蠢。我阅读了 Svelte 文档，但遇到了一个简单的问题。

基本上，我想获取组件的父尺寸（宽度和高度）。

例子：

<div>
  <MyNode />
</div>

在里面MyNode我想要父级的尺寸div。我怎样才能做到这一点？

我试过这个：

<script lang="ts">
  import { onMount, tick } from 'svelte'

  let w = 0
  let h = 0
  console.log({ w, h })

  onMount(async () => {
    console.log('on mount')
    console.log({ w, h })
    // await tick()
  })
</script>

<main>
  <div class="flex w-screen h-screen">
    <div class="white w-150 min-w-150 h-full">side menu</div>

    <div
      class="bg-ligthGrey flex-grow h-full border border-orange-500"
      bind:clientWidth={w}
      bind:clientHeight={h}
    >
      content
    </div>
  </div>
</main>

这就是我得到的：

这仅在第一次打印（当然，它在 onMount 内部），如果我调整窗口大小，则不会发生任何变化。我需要 …

我有一个像这样的数据结构。它基本上是一个对象数组。

const dataset = [
  {
    a: { total: 2, name: "red" },
    b: { total: 3, name: "gold" },
    c: { total: 6, name: "rose" },
  },
  {
    a: { total: 10, name: "red" },
    b: { total: 7, name: "purple" },
  },
  {
    a: { total: 1, name: "pink" },
    b: { total: 14, name: "blue" },
    c: { total: 10, name: "rose" },
  },
  {
    b: { total: 2, name: "green" },
    c: { total: 18, name: …