小编jon*_*bbs的帖子

不确定如何解释这个但是想象你有一个包含许多布尔字段的表......

表:汽车

列:

自动:布尔值

银色:布尔值

美国人:布尔

吵:布尔

臭臭:布尔

fast:布尔值

(愚蠢的田地,其中大部分都不会在现实中沸腾,只是一个例子)

我需要做的是生成这些字段的列表,每个字段旁边有一些搜索结果,所以如果数据库中有100辆银色汽车和57辆美国汽车,那么列表可能看起来有点像......

自动:(150)

银(100)

美国人(57)

吵闹(120)

臭臭(124)

快(45)

因此,它基本上就像一个过滤器列表,如果用户点击"白银",他们会缩小搜索范围,只显示银色汽车,他们知道他们将得到100个结果.然后,所有其他过滤器旁边的数字将减少,因为我们已经过滤掉所有非银色的汽车.

计算一个场的出现很容易......

SELECT COUNT(*)FROM CARS WHERE Automatic = true;

......例如,我会给第一行.但是我不想为每个过滤器做一个SQL语句,因为它们可能超过30个.我已经看到很多网站这样做,所以它必须比我想象的要容易.

任何帮助真的很感激:)

乔恩

我有一个使用Angular UI-Router的Angular JS项目很好但是我试图实现UI Bootstrap分页指令并且无法计算出正确的策略.

我有一个数据表,一次显示1页,我有分页指令,显示正确的页面链接数.单击链接时,它会获取新的页码,并对api进行Restangular调用以获取新记录并将它们绑定到表中.

这一切都运行良好,但显然当您浏览数据时,URL不会更改,因此用户无法使用浏览器后退/前进按钮来浏览其历史记录.理想情况下,我想使用以下URL:

/contacts
/contacts/page-2
/contacts/page-3

我还想在URL中包含排序,但这是另一个问题.

我可以实现这一点,但是当点击其中一个分页按钮时,手动转换到一个新状态,但这会重新加载控制器及其所有内容,对服务器进行额外的ajax调用,并将丑陋的非样式内容闪烁为它重新创建了分页控制等.

理想情况下,我可以更改URL并添加历史状态,但不会触发实际状态更改并重新加载/运行该视图的控制器.我不确定这是否可行,更不用说怎么做了.

有人有任何想法吗？

我刚刚升级到 Next JS 9.0，当我运行构建时，有一个很棒的新功能，可以显示所有编译页面的大小。它们都在 20-30k 左右，除了使用 Formik 的页面通常至少是两倍大小。主要问题是app.js文件超过600k而且是红色的。

有没有办法更深入地了解我的所有捆绑包的组成部分？

我正在尝试进入MVC,目前正在阅读wrox专业的ASP.NET MVC书籍.

我到目前为止得到了它.而不是每个URL进入页面它转到控制器.然后,控制器操作获取数据并决定使用哪个视图.

我也明白,如果我有一个像/ product.aspx？id = 100的网址,那么控制器会得到产品详细信息并将它们与"show product"视图合并.

现在这里有点我不明白......

如果我的产品页面上有其他内容,例如登录框,"十大产品"部分,类别列表等可能会或者不会在其他页面上使用,那么我将如何包含它们并将它们的代码分开？

在经典的aspx模型中,它很简单.如果我的前10个产品出现在每个页面上,那么我会把它放在母版页中,但如果它将用于某些页面而不是其他页面,我更有可能将其变成用户控件.

根据我对MVC的了解到目前为止,我的产品控制器必须获得前十大产品,因此任何其他控制器都会产生一个包含十大产品的页面.

困惑.请帮忙.

我在我的应用程序中使用UI路由器,当URL /状态发生变化时,我想对锚点进行简单的"scrollTo".我不想从模板加载下一步,或加载新的控制器.我只想在页面上有几个div并在它们之间上下滚动.HTML的简化视图就是这样.

    <div id="step1">
        <button ng-click="moveToStep2()">Continue</button>
    </div>
    <div id="step2">
        <button ng-click="moveToStep3()">Continue</button>
    </div>
    <div id="step3">
        Step 3 content
    </div>

因此,当您进入页面时,URL将是domain.com/booking

当您单击第一个按钮时,我希望我的控制器代码将URL更改为domain.com/#/step-2并向下滚动到"step2"div.

理想情况下,当用户点击后退按钮时,它将恢复到第一个URL并向上滚动回到第1步.

有人知道怎么做吗？

我正在尝试slideDown()在GSAP中复制jQuery ,并且我无法弄清楚jQuery如何计算当前隐藏的项目的高度,就像它被设置为一样height:auto.

我已经尝试在GitHub上搜索代码,但找不到任何似乎正在执行此操作jQuery.fn.slideDown或代码jQuery.fn.animate调用的代码.

关于SO有几个类似的问题,并提出了几个解决方案,所有这些问题似乎都有其自身的问题:

1. 克隆元素,将其放在屏幕上并计算其高度.
   
   如果元素或其任何子元素具有由CSS样式设置的高度,这将不起作用,CSS样式要求元素位于DOM中的原始位置(例如,.accordianItem如果它在其内部,则可能仅被设置样式.accordian).

2. 显示项目,删除height:0并快速计算高度,然后再次隐藏元素,然后说明动画.
   
   这可能会在计算高度时快速闪烁内容.

3. 用于visibility:true在计算高度时将其显示到位.
   
   这将停止闪光并仍然将元素保持在DOM中的相同位置以进行正确的高度计算,但是仍然会将其下方的其他项目推下来,因为visibility:false项目仍然具有高度.

4. 在项目被隐藏之前计算项目的高度并将其存储在数据属性中,以便我们在以后打开项目时知道它.
   
   如果任何动态内容在隐藏项目时更改项目的高度,则此操作无效.

jQuery slideDown()每次"只是工作",所以我真的很想知道它是如何工作的,但我无法解决它在做什么的问题.我也很惊讶GSAP不能开箱即用,或者之前没有人分享过这个问题.

真的很感激任何帮助.

首先，我是 React 新手，所以请放轻松，我已经寻找了重复的问题。

我了解 React 是基于组件的以及如何初始化组件，但是应用程序引导时运行的代码在哪里？

例如，我正在尝试制作一个小型应用程序，它使用 PusherJS 进行基于 websocket 的通信。当应用程序加载时，我需要通过 ajax 调用连接到推送通道并存储一些数据。当 Pusher 发送事件时，我需要与下部组件（如 MessageList 组件）进行通信，告知已收到新消息以及新数据是什么。

对于熟悉 AngularJS 的人来说，我会在 .config() 块中完成此操作，并将数据存储在服务或 $rootScope 中，但什么是“React Way”？

我已经创建了一个菜单组件，我正在尝试使用 useState 钩子来存储哪些子菜单是打开的。当菜单关闭时（从使用 props 的父菜单），我想关闭所有子菜单，为此我使用 react-hanger 库中的 usePrevious 钩子来确定主菜单何时从 OPEN > CLOSED 开始。这是我的代码。

import React, { useState } from 'react';
import { usePrevious } from "react-hanger"

const defaultMenusOpen = {menu1:false, menu2:false}

function Menu(props) {

    const [subMenusOpen, setSubMenusOpen] = useState(defaultMenusOpen))
    const prevIsOpen = usePrevious(props.isOpen);


    if(props.isOpen === false && prevIsOpen === true){
        setSubMenusOpen(defaultMenusOpen)
    }

    return (
        {props.isOpen && 
            ... JSX
        }
    );

}

export default Menu

问题是这会导致无限循环错误并不断重新渲染菜单。

这似乎是因为他的 if 语句在每次重新渲染时都为 TRUE，因为调用 setSubMenusOpen 似乎不会导致 usePrevious 再次存储新值。这就是我认为正在发生的事情。

• props.isOpen 从 TRUE > FALSE 变化
• prevIsOpen …

首先，有一些关于类似标题的问题，但我不相信这是重复的，因为我认为这是最近对软件包或 vercel 的更改导致的。

我升级了今天正在构建的应用程序中的一些软件包..

这是更改的包

  "dependencies": {
    "next": "^13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-next": "^13.2.3",
    "typescript": "4.9.5"
  }

从那时起，当我尝试将相同的代码部署到昨天部署良好的 Vercel 时，我遇到了很多新的 linting 错误。这是一个例子

Type error: 'supplierId' is possibly 'undefined'.
  56 | 
  57 |   // Get Supplier Products
> 58 |   const supplierProductsQuery = trpc.supplierProducts.get.useQuery({supplier_id: supplierId}, { enabled: supplierId > 0, ...refetchNever });

这段代码对我来说看起来不错。我知道该变量可能是未定义的，这就是为什么我将它用作标志来在未定义时启用某些功能。无论如何，这是一个旁白。重点是，我在本地运行时没有遇到任何类似这样的错误，运行下一个开发、下一个 lint 和下一个构建都没有错误地运行，但在 Vercel 上，它似乎突然变得更加严格，或者运行完全不同linting 规则。

有人能解释为什么会这样吗？

我有一个新网站，它不是单页应用程序，而是服务器呈现的网站（使用Umbraco CMS的ASP.NET）。我曾经在我的网站上使用过Angular 1.x，这很容易，因为您只需使用脚本标签将其加载，并且代码是未编译的。

我最近在SPA中一直使用React，它以create-react-app开头，该应用会为您照顾webpack，babel等并生成一个捆绑包。但是，我想在网站的多个位置使用React，例如主标题/菜单，联系表格等，因此产生多个捆绑软件是有意义的，尽管这些捆绑软件可以共享导入（Moment.js，Formik等）。

React网站上有说明，显示了如何包括一个脚本并将其附加到您网站中的元素，但没有复杂的示例。

因此，我该如何设置可以转换所有内容而不复制捆绑中的代码的东西。我是否需要在所有页面上加载某种主捆绑软件，并需要单独的捆绑软件来处理联系表格？

其次，我该如何连接所有东西？在SPA中，您只有一个根节点，并使用react-dom将您的应用程序绑定到该根节点，但是，如果您的应用程序中散布了微型的React功能，那么您是否需要某种主脚本来将所有内容绑定到正确的元素？

任何帮助将不胜感激，即使只是将我引向某种样板项目的方向。

哦，我对服务器端渲染的Next JS应用或类似的东西不感兴趣，我认为这可能太复杂而无法与CMS集成。