相关疑难解决方法(0)

React.memo 的 Typescript 通用类等效项

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

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

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

// and use like this
<GenericClass<number> />
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

generics memo typescript reactjs

9
推荐指数
2
解决办法
5320
查看次数

React.memo与React中的Typescript

我在.tsx文件中使用React.memo()(React typescript)

现在,我将Props的接口声明为:

interface Props {
  type?: string;
}
Run Code Online (Sandbox Code Playgroud)

我的组件看起来像:

const Component: React.SFC<Props> = props => {
  /// return something;
};

export default memo(Component);
Run Code Online (Sandbox Code Playgroud)

现在,由于type是一个可选的道具,我打算仅在某些时候使用它。

如果我使用我的组件,<Component type="something" />一切都很好。但是如果我在<Component />收到错误时使用它->

输入'{children:string; }”与“ IntrinsicAttributes&Props”类型没有共同的属性。

这似乎是一个非常荒谬的错误,因为我已经在Code沙箱上尝试过此方法,并且一切正常。关于错误可能是什么的任何想法?

更新

如果我在接口中明确添加道具

interface Props {
  type?: string;
  children?: ReactNode;
}
Run Code Online (Sandbox Code Playgroud)

那么在这种情况下,一切都很好。这应该是隐式的,但要考虑到它的错误

'{儿童:字符串;}'

有任何想法吗???

typescript reactjs

5
推荐指数
1
解决办法
2329
查看次数

标签 统计

reactjs ×2

typescript ×2

generics ×1

memo ×1