小编Pri*_*imm的帖子

与 Typescript 反应——使用 React.forwardRef 时的泛型

我正在尝试创建一个通用组件,用户可以在其中将自定义传递OptionType给组件以进行类型检查。该组件还需要一个React.forwardRef.

我可以让它在没有 forwardRef 的情况下工作。有任何想法吗?代码如下:

无转发引用.tsx

export interface Option<OptionValueType = unknown> {
  value: OptionValueType;
  label: string;
}

interface WithoutForwardRefProps<OptionType> {
  onChange: (option: OptionType) => void;
  options: OptionType[];
}

export const WithoutForwardRef = <OptionType extends Option>(
  props: WithoutForwardRefProps<OptionType>,
) => {
  const { options, onChange } = props;
  return (
    <div>
      {options.map((opt) => {
        return (
          <div
            onClick={() => {
              onChange(opt);
            }}
          >
            {opt.label}
          </div>
        );
      })}
    </div>
  );
};
Run Code Online (Sandbox Code Playgroud)

WithForwardRef.tsx

import { Option } from './WithoutForwardRef';

interface …
Run Code Online (Sandbox Code Playgroud)

generics typescript reactjs

37
推荐指数
2
解决办法
1万
查看次数

业力代码覆盖率 - 始终100%?

早上好,

我有一个奇怪的问题,我似乎无法解决.我已经写出了我的Karma测试并且执行正确,但是当我尝试连接Karma的代码覆盖时,无论如何都会吐出100%.

我看了一下这里提出的其他问题,似乎没有一个问题可以解决我的问题.任何帮助将不胜感激.

使用:

"karma": "~0.12.37",
"karma-babel-preprocessor": "^5.2.1",
"karma-browserify": "^4.2.1",
"karma-coverage": "^0.4.2",
"karma-jasmine": "~0.3.5",
"karma-phantomjs-launcher": "^0.2.0",
Run Code Online (Sandbox Code Playgroud)

这是我的karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',

    frameworks: ['browserify', 'jasmine'],

    files: [
        'bower_components/jquery/dist/jquery.js',
        'bower_components/angular/angular.js',
        'bower_components/angular-animate/angular-animate.js',
        'bower_components/angular-cookies/angular-cookies.js',
        'bower_components/angular-mocks/angular-mocks.js',
        'bower_components/angular-resource/angular-resource.js',
        'bower_components/angular-sanitize/angular-sanitize.js',
        'bower_components/angular-touch/angular-touch.js',
        'bower_components/angular-ui-router/release/angular-ui-router.js'
        'src/*.html',
        'src/**/*.html',
        'src/app/index.js',
        'src/app/**/*.js'
    ],

    exclude: [],

    preprocessors: {
        'src/app/index.js': ['browserify', 'coverage'],
        'src/app/**/*.js': ['browserify', 'coverage']
    },

    browserify: {
        debug: true,
        transform: ['babelify', 'stringify']
    },

    reporters: ['progress', 'coverage'],

    port: 9876,

    colors: true,

    autoWatch: true,

    browsers: ['PhantomJS'],

    singleRun: false
  });
};
Run Code Online (Sandbox Code Playgroud)

我的文件结构是:

src …
Run Code Online (Sandbox Code Playgroud)

karma-runner karma-jasmine gulp-karma karma-coverage

14
推荐指数
1
解决办法
2344
查看次数