小编Gab*_*bin的帖子

我正在构建一个组件库，我需要其中一些组件具有可自定义的标签名称。例如，有时看起来像 a<button>实际上是<a>。所以我希望能够像这样使用按钮组件：

<Button onClick={onClick}>Click me!</Button>
<Button as="a" href="/some-url">Click me!</Button>

理想情况下，我希望根据“as”道具推断可用的道具：

// Throws an error because the default value of "as" is "button",
// which doesn't accept the "href" attribute.
<Button href="/some-url">Click me!<Button>

我们可能还需要传递一个自定义组件：

// Doesn't throw an error because RouterLink has a "to" prop
<Button as={RouterLink} to="/">Click me!</Button>

这是没有 TypeScript 的实现：

function Button({ as = "button", children, ...props }) {
  return React.createElement(as, props, children);
}

那么，如何在传递 props 的同时使用 TypeScript 实现“as”props？

注意：我基本上是在尝试做该styled-components做的事情。但我们正在使用 CSS 模块和 SCSS，所以我无法添加样式组件。不过，我对更简单的替代方案持开放态度。

我使用的库上下文不导出其值的类型。它看起来是这样的：

type LocationContextObject = { /* some properties */ };

export type LocationContext = React.Context<LocationContextObject>;

我需要访问LocationContextObject，是否可以从中提取它LocationContext？

这是我所做的：

type LocationContextObject = ComponentProps<typeof LocationContext.Provider>['value'];

它确实有效，但看起来像黑客。所以我想知道是否有更优雅的解决方案。

我正在使用Gulp和gulp-ruby-sass来编译scss文件.该项目的文件夹如下所示:

css/
    scss/
        grid.scss
        styles.scss
    styles.css
node_modules/
    .bin/
        ...
    gulp/
        ...
    gulp-ruby-sass/
        ...
gulpfile.js
index.html

gulpfile.js:

// Load plugins
var gulp = require( 'gulp' ),
    sass = require( 'gulp-ruby-sass' );

// Styles
gulp.task( 'styles', function () {
  return gulp.src( 'css/scss/styles.scss' )
    .pipe( sass( { style : 'compressed' } ) )
    .pipe( gulp.dest( 'css/' ) );
});

CSS/SCSS/styles.scss:

@import 'grid';

css/styles.css跟踪错误"要导入的文件未找到或不可读:网格".

文档建议在gulp.dest()glob中包含所有必需的.scss文件,所以我:

// Load plugins
var gulp = require( 'gulp' ),
    sass = require( 'gulp-ruby-sass' );

// Styles
gulp.task( …