小编Ale*_*lex的帖子

我正在使用gulp-inject自动添加SASS导入,因为它们是在我的项目中新创建的.这工作正常,新的SASS文件被正确导入,但是当gulp-watch运行时删除已导入的文件时,它崩溃并出现以下错误:

 Error: _dev\style\style.scss
Error: File to import not found or unreadable: components/_test - Copy.scss
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "components/_test - Copy.scss";

我花了几个小时试图弄清楚为什么它试图用过时的导入编译旧版本的样式表.我在SASS任务上设置了延迟,并且在gulp-sass运行时,实际文件中的导入是正确的.我已经读到gulp-watch可能正在缓存stylehseet,但真的不确定.

下面是我的Gulp文件的相关位,底部是我的完整gulp文件的链接.

以下是我的监视任务:( 组件任务触发SASS任务)

// SASS
plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss'], function () {gulp.start(gulpsync.sync([
    'build-sass'
]));});
// COMPONENTS
plugins.watch(paths.dev+'/style/components/**/*.scss', function () {gulp.start(gulpsync.sync([
    'inject-deps'
]));});

SASS任务

gulp.task('build-sass', function() {
    // SASS
    return gulp.src(paths.dev+'/style/style.scss')
    .pipe(plugins.wait(1500))
    .pipe(plugins.sass({ noCache: true }))
    .pipe(gulp.dest(paths.tmp+'/style/'));
});

注入任务

gulp.task('inject-deps', function() {
    // Auto inject SASS
    gulp.src(paths.dev+'/style/style.scss')
    .pipe(plugins.inject(gulp.src('components/**/*.scss', {read: false, cwd:paths.dev+'/style/'}), {
        relative: true,
        starttag: …

运行 React 测试库以在使用 Emotion css 属性的 JSX 上生成快照，导致没有渲染任何 CSS。

我试过使用“@emotion/jest/serializer”，但仍然没有运气。

成分：

<button
      role="button"
      css={(theme)=> {
        backgroundColor: 'hotpink',
        '&:hover': {
          color: theme('lightgreen'),
        },
      }}
/>

测试：

import React from 'react';
import { render } from '@testing-library/react';
import { createSerializer } from '@emotion/jest';

import { Component } from './component';

expect.addSnapshotSerializer(createSerializer());

describe('IconComponent', () => {
  it('should match the snapshot for the given props', () => {
    const { asFragment } = render(<Component icon="knownIcon" />);
    
    expect(asFragment()).toMatchSnapshot();
  });

快照：（ 这被呈现为匿名对象而不是 CSS）

exports[` 1`] = ` …

我正在尝试使用通过Google Maps API v3创建的自定义样式和我通过"我的地方"工具在线创建的现有地图,而无需下载KML数据.

这是我的地图与KML数据的链接:

https://maps.google.co.uk/maps/ms?msid=214652605574280498452.0004d3cc7c556a8346d32&msa=0

我看到上一个问题解决了这个问题:

通过Google Maps API v3查询现有的公开Goog​​le地图

但是,有没有一种方法可以直接使用我的地图,而不是下载KML数据？我需要稍后更改地点标记,而不必每次都下载KML.

我正在构建一个 React 应用程序，它有几个用户交互阶段需要导航。在流程后期的阶段工作需要大量交互才能在重新加载页面以更改 JS 时返回到同一点。

Webpack 支持 HMR，它仅替换修改后的 React 组件，这意味着每次更改都不必重新加载整个应用程序，似乎 Rollup 不支持此行为。

Rollup 有哪些替代方案可以加快 React 应用程序的开发过程？我无法每次都手动输入输入数据以达到用户旅程中的同一点的整个过程。

我目前正在使用 Rollup 来捆绑 ES6 样式导入，将它们传递给 Babel，其输出是使用 Browsersync 提供的。这一切都是通过 Gulp 处理的。

吞咽配置：

const babelConfig = {
    exclude: 'node_modules/**',
    "presets": [['es2015', { modules: false }], 'react'],
    "plugins": ["external-helpers", "transform-remove-strict-mode", "transform-object-rest-spread"],
    babelrc: false
};

const rollupJS = (inputFile, options) => {
    let notifier = require('node-notifier');

    return () => {
        return plugins.rollupStream({
            entry: options.basePath + inputFile,
            format: options.format,
            sourceMap: options.sourceMap,
            plugins: [
                plugins.rollupPluginBabel(babelConfig),
                plugins.rollupPluginReplace({ 'process.env.NODE_ENV': JSON.stringify('dev') }), //production …

如何在 React Table 中使用单选输入而不是复选框作为可选表？

有一个复选框但不是单选按钮的示例：https://github.com/tannerlinsley/react-table/blob/master/examples/row-selection/src/App.js

更改 InminatedCheckox 以使用无线电输入不起作用，因为反应表中的选择状态未更新：

const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef();
    const resolvedRef = ref || defaultRef;

    useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return <input name="select-radio" type="radio" ref={resolvedRef} {...rest} />
    );
  });

它看起来正确，但没有传递正确的选择状态：

我正在尝试将 prop 类型从一个视图组件导出到另一个容器组件，并将它们用作状态类型定义：

// ./Component.tsx
export type Props {
    someProp: string;
}

export const Component = (props: Props ) => {
    ...etc
}

// ./AnotherComponent.tsx
import { Component, Props as ComponentProps } from "./Component";

type Props = {}

type State = ComponentProps & {};

class AnotherComponent extends React.Component<Props, State> {
    state: State;
    ...etc
}

但是我进入控制台：

Module '"./Component "' has no exported member 'Props'.

关于我应该如何处理这个问题有什么建议吗？

我也尝试过按照本文使用查找类型，但没有什么乐趣。

给出以下react-redux代码:

const TextListContainer = ({ items, actions }) => (
    <TextList items={items} actions={actions} />
)

为什么这里使用的是普通括号而不是大括号？

为了进一步说明我的问题:

正常功能:

const someFn = something => {
    //...
}

BRACE STYLE功能:

const someFn = something => (
    //...
)

这种代码风格从这里复制:https://github.com/reactjs/redux/blob/master/examples/todomvc/src/containers/App.js