小编Sam*_*uel的帖子

我正在尝试在 TypeScript 中扩展反应组件道具，以便它包含所有普通html按钮attributes，以及反应特定的东西，如ref

我的理解是类型React.HTMLProps是我需要的，（React.HTMLAttributes不包含ref）

但是，当尝试将我的道具传递给styled组件时，编译器会抱怨。

我的尝试 Codesandbox 示例：https ://codesandbox.io/s/cocky-cohen-27cpw

假设我有一个看起来像这样的工会

type Colors = 'red' | 'blue' | 'pink'

是否可以针对此联合对数组进行类型检查并确保该数组包含所有类型？

IE：

const colors: UnionToTuple<Colors> = ['red', 'blue']  // type error, missing 'pink'
const colors: UnionToTuple<Colors> = ['red', 'blue', 'pink']  // no error

我将如何渲染一个带有嵌套<ul>项目的菜单，其中包含未知数量的子项，以对如下示例中的对象做出反应？

[
  {
    title: "Top level 1",
    slug: "top-level-1",
    children: [
      {
        title: "Sub level 1",
        slug: "sub-level-1",
        children: [
          {
            title: "Sub Sub Level 1"
            slug: "sub-sub-level-1"
          }
        ]
      }
      {
        title: "Sub level 2",
        slug: "sub-level-2"
      }
    ]
  },
  {
    title: "Top level 2",
    slug: "top-level 2"
  }
]

我试图重复使用并延长一个styled-component没有运气.我怀疑我还没有完全掌握如何正确使用styled-components

我有一个组件,根据icon传递给它的prop ,呈现一个V形图标.我想要做的是导出此组件,然后导入它并扩展其样式.即 - 在此示例中删除其填充Header.jsx:

Chevron.jsx

import React from 'react'
import styled from 'styled-components'

const StyledChevron = styled.i`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    cursor: pointer;
    border-left: 1px solid #efefef;
    transition: all .1s linear;
    transform: rotate(0deg);
    ${props=>props.closed && ``};
    &:hover {
        background: #f7f4f4;
    }
`

const Chevron = (props) => {

    return (
        <StyledChevron closed={props.item.closed} onClick={()=>{props.openSubMenu(props.item.id)}} className={props.icon}/>
    )

}

export default Chevron

Header.jsx

import React from 'react'
import styled from 'styled-components' …

我有一个电子应用程序启动轻量级express服务器,允许我http在生产中用于firebasegithub身份验证.

我使用signInWithRedirect()firebase auth方法可以正常工作.但是,我无法使用该signInWithPopup()方法.

将electron启动一个新窗口,但内容为空.我的电子输入文件是否需要按照预期配置上述工作？

这在我在常规浏览器窗口中启动应用程序时工作正常,这导致我认为电子需要配置...

查看文档，我正在努力寻找使用附加数据结构呈现图表的解决方案。

任何人都可以帮助回答以下是否可行以及如何可行？

• 多个分组堆栈（在组中重复使用数据集）
• 为组内的每个条添加子标签。

有没有人能够通过图书馆实现这一目标？

提前致谢。

我刚刚发现在我的反应项目中使用HOC的惊人好处.

我的问题是在组件上调用多个HOC函数是否有任何性能损失？

例

export default withState(withLabel(withTheme(MyComponent)))

这当然只有render一个组件,但是看看我的反应开发工具,我可以看到输出的HOC组件三层深.这是否需要警惕,或者是否有更好的方法来调用组件上的多个HOC？

我试图根据是否传递特定道具有条件地扩展我的组件道具。

我的目标是通过anchorifhref传递的属性来扩展 props ，并通过buttonif的属性扩展。

这甚至可能吗？

这是我的尝试：

考虑以下接口：

interface Theme {
  color: {
    primary: {
      light: string
      base: string
      dark: string
    }
    secondary: {
      lighter: string
      light: string
      base: string
      dark: string
      darker: string
    }
  }
}

我正在尝试编写一种允许元组的类型，第一个元素映射到 中的任何键colors，第二个元素映射到其下的任何键（即：）base。

IE：

['primary', 'light'] ? valid
['secondary', 'darker'] ? valid
['primary', 'darker']  invalid

这是我在tsplayground 上进行的一次尝试，我在这里面临的问题是，如果我想允许多个键作为第一个参数传递，那么第二个需要满足所有第一个参数。有没有办法告诉打字稿使用作为类型传递的文字值？

type PickThemeColor<C extends keyof Theme['color'] = keyof Theme['color']> = [
  C,
  keyof Theme['color'][C]
]

//  this complains because 'darker' doesnt appear in both 'primary' and 'secondary' keys

const …

我一直在阅读新的上下文 API，并有一个问题是关于将它与 HOC 一起使用来注入 props，而不是直接将每个需要访问某个状态的孩子与消费者包装在一起。

没有上下文就不能实现上述目标吗？难道不能只在 HOC 中存放一些状态并将其注入需要访问的包装组件中吗？