小编KWe*_*iss的帖子

我有一个可以有任意数量子元素的 Flexbox 元素。这些子项可以具有不同的宽度（但不超过 100%），并且高度相同，因此它们形成整齐的行。插图：

[.....] [....]  
[.............]  
[..] [....] [.]  
[......]

当超过三行时，我想以不同的方式设置元素的样式，而不是只有三行、两行或一行时。有什么方法可以用 CSS 做到这一点吗？

我不知道一行中有多少个子元素。每行可能有一个孩子，也可能是两个或三个。如上图所示。这些元素是根据可以更改的数据生成的，因此我无法将它们固定为每行 x 个元素。

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent .child {
  max-width: 100%;
  background: red;
}

// can I do this?
.parent:has-more-than-three-lines .child {
  background: blue;
}

我知道我可以使用 JavaScript 来读取元素的高度和渲染后子元素的高度，并计算有多少行。但我想避免这种情况。如果我必须给子元素一个固定的高度，这对我来说没问题。

需要明确的是，我想根据父级的高度来设置所有子级的样式，而不仅仅是附加行中的子级。

我正在使用React的Context API将一些上下文传递给较低级别​​的组件。

我希望能够在没有上下文提供程序的情况下运行组件（用于测试）。为此，我需要检查组件周围是否有上下文提供程序。

示例代码：

const Wrapper = () => {

  // in my real app, there are some levels 
  // between the provider and the child component

  return <NameProvider value={name: 'User'}>
    <ChildComponent />
  </NameProvider>
}

const ChildComponent = () => {
  if (/* what can I put here ? */) {
    // inside Provider
    return <NameConsumer>
      {context => <span>{context.name}</span>}
    </NameConsumer>
  } else {
    // no provider available, e.g. in a test file
    return <span>Test Text</span>
  }
}

这个问题不是专门针对测试的。在其他情况下，组件需要在上下文提供者内部和外部工作。

我在网站上使用 AG Grid。当用户单击某个单元格时，该单元格将获得焦点并显示蓝色轮廓。

当用户单击网站上的某些其他元素时，我需要删除此焦点，但我不知道该怎么做。有没有可以设置的方法或属性？

我想验证Javascript输入中的数字.

输入应接受:

• 空输入''
• 正数'123'
• 负数'-123'

我用过这个正则表达式:

^(-?)[\d]*$

它效果很好,但它也只接受减号字符' - '.我想排除这种可能性.我当然可以替换*为+,但这将排除空字符串.

我怎么能这样做,以便-必须后跟至少一个数字,但一个完全空的字符串仍然可以吗？

我有一个名为 的字体文件icon-font.woff，我有相应的 SVG 文件。它里面有一些图标。现在我想使用 css 在我的 html 文件中使用这些图标，如下所示：

.icon-add-contact:before{content:""}

但我不知道我需要在content上面给出什么价值。而且我不知道哪个值属于哪个图标。

如何处理？

我正在创建一个函数来处理数据库中的对象。我有两个不同的数据结构，其中相同的属性具有不同的名称。我无法更改它，因此必须使用JavaScript进行处理。
对象具有其他差异，但这对于此功能并不重要。
我想对两种不同类型的对象使用相同的功能。这是演示我的问题的示例代码：

interface TypeA {
    itemName: string;
}

interface TypeB {
    itemTitle: string;
}

function getItemName(item: TypeA | TypeB): string {
    let name = '';

    if (item.hasOwnProperty('itemName')) {
        name = item.itemName;
    } else {
        name = item.itemTitle;
    }

    return name;
}

当然，此代码将运行。但是IDE会将行name = item.itemName;和行都标记name = item.itemTitle;为错误（“类型上不存在属性”），因为两种类型都不具有两种属性。

那么，什么是正确的打字稿方式呢？

我有一种情况，我需要一个函数来接受各种不同的类型。它们将由函数内的类型保护分隔开。所以我使用这样的联合类型：

function(param: TypeA | TypeB): void {
    let callback: (param: TypeA | TypeB): void = () => {};

    if (isTypeA(param)) {
        callback = doSomethingWithTypeA;
    } else if (isTypeB(param)) {
        callback = doSomethingWithTypeB;
    }

    return callback(param);
}

其中该函数doSomethingWithTypeA仅接受 typeA 等。

正如您所看到的，总是写出(TypeA | TypeB)是非常冗长的，特别是因为它在我的实际代码中超过两种类型。

有什么方法可以创建这样的界面(TypeA | TypeB)吗？
或者还有其他方法可以实现这一目标吗？