小编mav*_*ick的帖子

我有一个 React 组件，它接收用户名和密码并将其发送以进行身份​​验证。如果身份验证成功，页面应该移动到呈现另一个组件的不同路由。

现在的问题是，我不确定如何从我的商店更改路线？即不使用<Link>React Router的组件？我知道我们可以使用this.props.history.push(/url)以编程方式更改路由，但它只能在 React 组件中使用 using <Route>，而不能在商店中使用。

我使用 React16 和 MobX 进行状态管理，使用 ReactRouter V4 进行路由。

店铺：

class Store {
    handleSubmit = (username, password) => {
        const result = validateUser(username, password);
        // if result === true, change route to '/search' to render Search component
    }
}

登录组件：

const Login = observer(({ store }) => {
    return (
        <div>
           <form onSubmit={store.handleSubmit}>
                <label htmlFor="username">User Name</label>
                <input type="text" id="username" onChange={e => store.updateUsername(e)} value={store.username} />
                <label htmlFor="password">Password</label>
                <input …

所以我试图了解jQuery内部是如何运作的。jQuery公开一个全局$变量，可以像这样使用：

$('.abc') // returns a list of DOM nodes having class abc
$.ajax() // used to perform AJAX requests

正如你所看到的，$在语句 1 中它是一个函数，在语句 2 中它是一个对象。现在我知道这是可能的，因为function Objects在 JavaScript 中，这意味着函数Object在 JavaScript 中也是 an ，因此你可以附加方法到它。但我不确定内部是如何实现的？

我正在看这篇博客文章，它解释了如何使用“构造函数模式”来模仿 jQuery，但是如何在$使用该模式时附加方法呢？或者 jQuery 使用一些完全不同的模式？这是 jQuery 的一个小实现。这段代码可以实现$(selector)，但是如何添加呢$.method？

$('.abc') // returns a list of DOM nodes having class abc
$.ajax() // used to perform AJAX requests

// Mini jQuery implementation 
var …

我正在开发一个使用Create React App构建的 React 应用程序。我的应用程序中的 CSS 遇到了一些问题。CSS in devmode 与CSS in mode 不一致production。有些 CSS 是内联dev模式，<style>在<head>. 但相同的CSS在prod模式下是在一个单独的文件中。这会导致一些意外的覆盖，进而导致生产中出现一些 CSS 问题。有没有办法完全删除两者中的所有内联 CSS dev，prod以便行为在各处保持一致？

我认为问题在于如何webpack在这些模式下捆绑应用程序。

注意：我不想eject我的create-react-app.

我正在使用这个流行的轮播（http://kenwheeler.github.io/slick/）。

我在每张幻灯片中放置了某些元素。在移动到下一张幻灯片之前，用户必须至少选择其中一个元素。但我无法弄清楚如何防止用户在选择元素之前通过单击“下一个”箭头手动移动到下一张幻灯片。

我知道可以禁用“下一张/上一张”箭头，但我不想这样做，因为用户可能想返回上一张幻灯片来更改他的选项。

我知道一个选项是禁用默认箭头并引入我自己的上一个/下一个箭头，然后将幻灯片更改功能以及条件检查绑定到它。但如果这个滑块中有一些内置选项（我无法弄清楚），那就太好了，因为它会最大限度地减少我的努力。

我有一个基于React的应用程序，其中有一个测试文件，打算通过Jest运行。该测试需要从其他文件导入类。我导入的文件进一步导入了其他文件，依此类推。该项目具有许多路径的别名，以减少导入路径时的键入（在Webpack中配置）。

当我jest在npm中运行命令时，出现错误消息“无法找到模块...”。运行Jest时如何解析文件路径？我无法嘲笑这些模块，因为这些是运行测试所需的自定义模块。

我正在创建一个 React 应用程序，它在用户键入时向服务器发出搜索请求。我想消除这个搜索请求，但不确定如何在我现有的代码中实现它：

Mobx 商店：

// function which initiates a fetch request to server
@action searchPlanet = async (event) => {
            this.searchString = event.target.value;
            this.planets = await getPlanets(this.searchString);
        }

反应组件调用searchPlanet：

const Search = observer(({ store }) => {
    const planetList = toJS(store.planets);
    return (
        <div>
            <div className={style.search_container}>
                <input type="text" id="search" onChange={e => store.searchPlanet(e)} value={store.searchString} placeholder="search planet" />
            </div>
        </div>
    )
})

我不能直接使用 debounce 函数，onChange因为这也会延迟 Search 组件的重新渲染，所以用户会在一段时间后看到输入的文本。但是我不知道如何在我的商店中实现去抖动功能？我可以做这样的事情：

import _ from lodash

@action searchPlanet = async (event) => …

I am using Storybook version 3.3.15 on Windows 7 running node version 6.3.1 and npm version 3.10.6.

在正在运行的故事书上，我在呈现操作面板的页面底部看到“无可用面板”消息。我已经addon-actions在addons.js中导入：import @storybook/addon-actions/register模块也存在于node_modules文件夹中。在webpack编译过程中或在浏览器控制台中，我没有收到与此有关的任何错误。

如何使“操作面板”出现？

注意：我无法更新Node和NPM版本，因为我正在开发一个专业级别的应用程序，其中涉及很多人，并且它的代码库很大。

这可能看起来很基本，但我不知道如何在 LESS 中使用 CSS 变量？

变量.css：

.root {
    --header-color: white;
    --content-color: yellow;
}

样式.less：

@import "../variables.css";
.header {
   color: @header-color;
}

我收到错误“@header-color 未定义”。

我正在研究普通的 JavaScript 和 DOM。在浏览MDN时，我偶然发现了这个术语Interface。根据 MDN，其他 DOM 元素继承有各种基本接口。它们是HTMLElement、Element、Node和EventTarget。我理解 JavaScript 中 a 的概念Class，但是InterfaceJavaScript 中 a 是什么意思？我尝试使用该HTMLElement界面，但出现错误。

const myElem1 = new HTMLElement('div')
const myElem2 = new HTMLElement('')

上面的两个语句都会引发错误Uncaught TypeError: Illegal constructor。另外， anInterface似乎不是 a Class。考虑这段代码：

const elmnt = document.getElementById("myDIV");
const height = elmnt.clientHeight

clientHeightElement根据 MDN，是 Interface 上的一个属性。因此，如果Element是一堂课，clientHeight应该是 on Element.prototype.clientHeight，而不是 on Element.clientHeight。

是否可以在我们的 JavaScript …

我在 MDN 上查看了方法的polyfillArray.isArray，这是我发现的：

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

虽然这有效，但我想知道为什么 MDN 没有将以下内容列为isArray?

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return arg.constructor === Array;
  };
}

上面的代码有点短，更简单。我想知道使用 MDN 的实现与上述相比是否有任何优势？

考虑一下我通过Karma运行的以下Jasmine代码：

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getName() { this.getFullName() }
    getFullName() { this.firstName + this.lastName }
}

describe('Test Person', () => {

    beforeEach(() => {
        const programmer = new Person('John', 'Gray');
        spyOn(programmer, 'getFullName');
        programmer.getName();
    });

    it('getName should call getFullName', () => {
        expect(programmer.getFullName).toHaveBeenCalled();
    })
});

我要检查programmer.getName确实调用了programmer.getFullName。我知道可以通过检查的返回值在此处进行测试getName，但是我想显式检查是否getFullName调用了，因为这是我正在使用的实际代码中的场景。我已经实现了如上所示的代码，但无法正常工作。我要去哪里错了？

我检查了这篇文章，但在这里不起作用。

所以我对ReactJS中setState的异步性质有些困惑.根据React docs,你不应该在setState()中使用this.state.但是,如果我有一个计数器作为一个状态,我想点击这样更新它:

class App extends React.Component {
    state = { counter: 0 }

    onClick = () => {
        this.setState({counter: this.state.counter + 1})
    }

    render() {
        return (
          <div>
            <div>{this.state.counter}</div>
            <p onClick={this.onClick}>Click me</p>
          </div>
        )
    }
}

这按预期工作.那么为什么这段代码错了呢？

更新:我知道setState是异步的,它接受一个回调,它有一个先前的状态作为参数,但我不知道为什么我应该在这里使用它？我想引用setState中的旧状态,那么为什么我应该在这种情况下使用回调函数呢？无论什么时候this.setState()执行,this.state它内部总是会引用旧状态,只有在setState完成执行后才会将其值更改为新状态,而不是在执行时.

在 ES6 中，我们可以像这样导入导出的模块：

import { Abc } from './file-1';  // here Abc is a named export
import Def from './file-2';  // here Def is the default export

但是我们如何导入匿名函数呢？考虑这段代码：

文件-3.js：

export function() {
  return 'Hello';
}

export function() {
  return 'How are you doing?';
}

鉴于上述两个函数既不是默认导出也不是命名导出（匿名函数没有名称！），如何将它们导入到另一个文件中？