小编Gre*_*rel的帖子

由于React 16现在允许自定义DOM属性,我试图在我的Typescript代码中利用它:

import * as React from 'react';

<div className="page" size="A4">
</div>

但收到此错误消息:

错误TS2339:类型'DetailedHTMLProps <HTMLAttributes <HTMLDivElement>,HTMLDivElement>'上不存在属性'size'.

这个帖子建议做一个module augmentation,所以我尝试这样:

import * as React from 'react';

declare module 'react' {
     interface HTMLProps<T> {
        size?:string;
    }    
}

相同的错误消息.

最后,我还尝试将其声明page为新的HTML标记:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      page: any
    }
  }
}

<page className="page" size="A4">
</page>

它消除了错误消息,但size在编译的代码中完全忽略了该属性,我最终得到:

<page className="page">
</page>

理想情况下,最后一个是我的首选解决方案.我想在size自page定义标记旁边使用自定义属性.

tsconfig.js

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": …

如果我用于useCallback自定义挂钩的方法，我是否还应该记住返回的对象？我假设它不会每次都创建一个新对象，因为它是由记忆方法和原语组成的。

export const useToggle = (args: UseToggleProps) => {
    const initialState=
        args.initialState !== undefined ? args.initialState : false
    const [active, setActive] = useState(initialState)

    const toggleOff = useCallback(() => {
        setActive(false)
    }, [])

    const toggleOn = useCallback(() => {
        setActive(true)
    }, [])

    const toggle = useCallback(() => {
        setActive((active) => !active)
    }, [])

    // Should this also be memoized with useMemo?
    return {
        active,
        toggle,
        toggleOff,
        toggleOn
    }
}

我正在尝试为以下函数的成员提供类型。 args是具有data类型属性的对象UserCreateInput

所以，从这个：

createUser(parent: any, args: any, context: any) {
    return context.prisma.createUser(args.data)
}

我是这样写的：

createUser(parent: any, args: {data: UserCreateInput}, context: any) {
    return context.prisma.createUser(args.data)
}

我不确定如何替换“xxx”，createUser(parent: any, xxx, context: any)所以我可以简单地返回return context.prisma.createUser(data)

我正在尝试使用React钩子将类重构为无状态组件。

组件本身非常简单，我看不出哪里出错了，因为它几乎是从 react 文档复制粘贴的。

当用户单击按钮时，组件会显示一个弹出窗口（按钮通过道具传递给我的组件）。我正在使用typescript.

我评论了在hooks版本中无法执行我想要的行

这是我的原始课程：

export interface NodeMenuProps extends PropsNodeButton {
  title?: string
  content?: JSX.Element
  button?: JSX.Element
}
export interface NodeMenuState {
  visible: boolean
}
export class NodeMenu extends React.Component<NodeMenuProps, NodeMenuState> {
  state = {
    visible: false
  }

  hide = () => {
    this.setState({
      visible: false
    })
  }

  handleVisibleChange = (visible: boolean) => {
    this.setState({ visible })
  }

  render() {        
    return (
      <div className={this.props.className}>
        <div className={styles.requestNodeMenuIcon}>
          <Popover
            content={this.props.content}
            title={this.props.title}
            trigger="click"
            placement="bottom"
            visible={this.state.visible} …

我怎样才能像在 React 中一样在 Svelte 的 HTML 中创建变量，或者这根本不是我应该如何使用 Svelte 的。我知道下面的例子很简单，但我正在考虑一种情况，我确实需要一些沉重的逻辑subArray（无法使用单行）

反应

<ul>
  {myArray.map((item) => {
    const subArray = item.items.filter(i = i > 0) // <- how can I have an intermediate variable like this in Svelte?
    return <li>{subArray.map(...)}</li>
  }}
</ul>

斯韦尔特

<ul>
  {#each myArray as item}
    <li>
        {#each <complex-logic> as subItem}
        ...
        {/each}
    </li>
  {/each}
</ul>

我在 React 组件的构造函数中传递一个对象作为参数。然后，我想调用对象的函数之一，但收到此错误消息：

Uncaught TypeError: _this.layout.getWbsLayout is not a function
    at new Wbs (Wbs.tsx:50)
    at react-dom.js:4749
    at measureLifeCyclePerf (react-dom.js:4529)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (react-dom.js:4748)
    at ReactCompositeComponentWrapper._constructComponent (react-dom.js:4734)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4642)
    at Object.mountComponent (react-dom.js:11542)
    at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4825)
    at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4712)
    at Object.mountComponent (react-dom.js:11542)

我在构造函数中阅读了一些关于将方法绑定到 this 的帖子，但是当我调用作为参数传递的对象的函数时，我不确定这是否适用于此，并且仍然收到类似的消息说bind is not a function.

这是我的代码，Wbs是根 React 组件，WbsLayout是我作为参数传递给 Wbs 的构造函数的对象。

错误发生在构造函数中，当我这样做时请this.layout.getWbsLayout() 注意，我尝试在其中调用该函数ComponentDidMount，但遇到了相同的错误。

import * as React from 'react';
import WbsLayout from "../layout/WbsLayout";

interface WbsProps {}
interface WbsState {
    wbsElements: …

我使用Typescript构建了一个React组件，该组件使用cytoscape（及其类型）作为无头模型。我的目标是创建一个NPM软件包，以便可以直接将其导入其他项目中。

我的图书馆：

1. 当我将index.html中的cytoscape.js导入为静态资产时有效
2. 当我npm install在新的es6应用中输入我的组件时不存在： Uncaught ReferenceError: cytoscape is not defined at new WbsLayout。尽管cytoscape在安装我的组件时自动安装在node_modules中。

打字稿来源

WbsLayout.tsx：

export class WbsLayout  {
    //...
    public cy: Cy.Core;
    constructor(graph: any, Options?: Options) {           
        this.cy = cytoscape({ // <-- Works or fails, see cases #1 and #2 explained above
            headless: true,
            elements: graph
        });
        //...
    }
    //...
}

请注意，我没有import cytoscape from 'cytoscape'（或以任何类似的方式）在组件源中的任何地方，因为我似乎没有任何东西，因为用Typescript和cytoscape的类型定义方式，我不需要它来使组件正常工作用html导入的cytoscape。也许这对于NPN软件包来说是个问题...

Wbs.tsx：

一个简单的React组件，它接收道具WbsLayout。

cytoscape的类型（仅相关部分）

declare namespace Cy {
    //...
    interface Core { } …

是否可以在 Typescript 中获取字符串文字类型的值？

type MyStringLiteral1 = 'ONE'
type MyStringLiteral2 = 'TWO'

type MyStringLiterals = MyStringLiteral1 | MyStringLiteral2

...

<div>
    // how can I get the value of MyStringLiteral1 here?
</div>

在下面的文件夹结构中，我想以App.tsx这种方式导入我的组件：

import MyComponent from './MyComponent';

package.json尽管我的文件设置了属性，但 Typescript 仍会抛出错误main：

找不到模块“./MyComponent”`

文件夹结构：

src/
|- App.tsx
|- MyComponent/
|    |- MyComponent.tsx
|    |- package.json
|    |- ...

我的组件.tsx：

export default class extends Component {
  ...
}

包.json：

{
  "name": "my-component",
  "version": "0.0.0",  
  "main": "MyComponent.tsx"
}

如果我更改MyComponent.tsx为，它会起作用，但我认为inindex.tsx的目的是完全做我正在尝试的事情。谢谢！mainpackage.json

gql使用“...”标签编写 GraphQL 查询时，有没有办法获得自动完成功能Typescript？

例如，类似于在 Graphiql 中编写查询时的情况。

我正在使用 v3 获取一些数据@apollo/client。在Chrome的网络选项卡（http结果）中，我可以看到它返回数据和错误（我并不担心该错误，我现在知道为什么会这样。）：

{\n    data: {workItems: [,\xe2\x80\xa6]},\xe2\x80\xa6},\n    errors: [{message: "Error trying to resolve position."\n}\n

但是在我的应用程序中，data返回未定义。

这是我的客户端配置：

export const graphqlClient = new ApolloClient({\n    cache: new InMemoryCache(),\n    link: ApolloLink.from([\n        onError(({ graphQLErrors, networkError }) => {\n            if (graphQLErrors) {\n                graphQLErrors.forEach(error =>\n                    console.log(\n                        `[GraphQL error]: ${JSON.stringify(error, null, 2)}`\n                    )\n                )\n            }\n            if (networkError) {\n                console.log(`[Network error]: ${networkError}`)\n            }\n        }),\n        apolloLink\n    ])\n})\n

我的查询：

gql`\n    query WorkItems($ppm: String) {\n        workItems(where: { ppm: $ppm }) {\n            ...WorkItemKanban\n …

根据文档，Tailwind JIT（Just In Time）模式允许添加任意样式。

我无法让它适用于 CSS 网格的grid-template-areas属性。在这个简单的例子中，我只想要左侧的边线，右侧的主要内容。

请注意，我有更复杂的目标，我知道我不需要 CSS 网格来实现如此简单的布局。

• JIT 模式的工作原理是使用任意填充，例如px-[23px]Works。
• 问题就在这里：[grid-template-areas:'sider content']，就像您转到 CSS 选项卡一样，如果未注释，则有相同的属性可以工作。

这是一个游乐场：

<div class="grid [grid-template-areas:'sider content']">
  <sider class="[grid-area:sider]">SIDER</sider>
  <main class="[grid-area:content]">MAIN</main>
</div>