小编Thu*_*San的帖子

有没有办法在 React.memo 中设置新的泛型？

例如，对于类组件，我可以使用

// set generic
class GenericClass<G extends string | number> extends PureComponent {}

// and use like this
<GenericClass<number> />

在下面的场景中，我想让 G 型泛型。

type G = string;
const MemoComponent = memo<{ value: G; onValueChange: (newValue: G) => void }>(
  ({ value, onValueChange }) => {
    return (
      <select
        onClick={() => {
          // do calculation
          onValueChange(value);
        }}
      >
        Button
      </button>
    );
  }
);

我想知道有没有办法在 React.memo 中设置泛型？例如，像下面

const MemoComponent = <G extends string | number | object>React.memo<{value: G}>(({value}) => …

我正在使用惰性来拆分路线，我想知道是否有任何办法可以使惰性和悬念的加载进度。

目前，我正在像这样使用它。

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Switch>
        <Suspense fallback={<div>loading</div>}>
          <Route path="/" exact={true} component={Home} />
          <Route path="/About" component={About} />
        </Suspense>
      </Switch>
    </Router>
  );
}

？但我想显示加载进度（例如youtube）。
？我有什么办法可以检索例如下面的示例的进度。

<Suspense fallback={({progress}) => <LoadingBar progress={progress}/>}>

我想获取生成器函数的返回类型。
例如

function* test(){
  yield 'a';
  yield 123;

  return true;
}

// what I'm trying to get
type A = GetGeneratorReturn<test>; // -> A has type boolean

我目前处于什么状态。

type B = ReturnType<ReturnType<typeof test>['next']>['value'];
// B has type `true | "a" | 123`

（我想如果我得到 Union 类型 B 的第一项，我就可以获得返回类型）

使用打字稿，并希望为具有样式组件的Material UI组件设置样式。
但是StyledComponent显示时发生类型错误Type '{ children: string; }' is missing the following properties

import React, { PureComponent } from 'react';
import styled from 'styled-components'; // ^4.1.3
import { Button } from '@material-ui/core'; // ^3.9.1

class TestForm extends PureComponent {
  render() {
    return (
      <>
        <Button style={{ backgroundColor: 'red' }}>Work</Button>{/* OK  */}

        <StyledButton>Doesn't work</StyledButton>{/* Type Error happens here <=============== */}
        {/**
          Type '{ children: string; }' is missing the following properties from type 'Pick<Pick<(ButtonProps & RefAttributes<Component<ButtonProps, any, any>>) | (ButtonProps & …

如何在 react-final-form 中设置更改 onSubmit 的值类型。

inteface IValues {
    name: string;
}
<Form onSubmit={(values: IValues) => {}}>   // Error happens here
//    Types of parameters 'values' and 'values' are incompatible.
//    Type '{}' is missing the following properties from type 'IFormValues': name

这有效，但我无法获得 value.name

<Form onSubmit={(values: object) => {
    // Property 'name' does not exist on type 'object'
    values.name
}}>

我可以按如下方式转换为 IValues 以提取名称。

<Form onSubmit={(values: object) => {
    const { name } = values as IValues;
}}>

onSubmit 来自 Config，我尝试查找如何设置 FormData …