小编aza*_*gru的帖子

尝试使用React + Redux,可能正在做一些明显愚蠢的事情,因为在获取数据时,触发通过网络获取数据的操作的组件不会更新(重新呈现).

以下是我的代码的相关部分:

顶级index.js作为应用的入口点:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reduxPromise from 'redux-promise';
import createLogger from 'redux-logger';

const logger = createLogger();

import routes from './routes';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(reduxPromise, logger)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.container'));

顶级容器应用:

import React, {Component} from 'react';
import { bindActionCreators } from 'redux'; …

我正在尝试在我安装的项目中使用一个非常新的第三方模块npm.该模块显然是在具有不区分大小写的文件系统的操作系统上开发的,因此它需要一个文件,injectable.js而实际的文件名是Injectable.js.这打破了捆绑过程.

该模块的开发人员知道这个问题.同时,我试图弄清楚如何使用模块.我正在使用Webpack捆绑我的项目.

我项目相关部分的树形结构大致如下:

???config
?     ???webpack
?          ???webpack.js
?
???src
?   ???client
?        ???index.js
?
?
???node_modules
?    ???the module in question
?          ??? dist
?          ?   ??? decorators
?          ?   ?   ??? providers
?          ?   ?         ??? Injectable.js
?          ?   ?
?          ?   ??? index.js
|
???gulpfile.js

在index.js该文件node_modules/the module in question/dist夹是需要将文件Injectable.js从供应商文件夹,但用命令这样做require('./decorators/providers/injectable');

我想别名./decorators/providers/injectable在index.js用./decorators/providers/Injectable.

这是我在webpack.js文件中所做的事情:

resolve: {
        alias: {
            './decorators/providers/injectable': './decorators/providers/Injectable.js',
        }, …

给定一个具有可变长度文本的内联（或内联块）元素，以及第一个元素右侧的另一个元素充当一种徽章，是否有一种方法可以防止第一个元素的最后一个单词之间出现换行符元素和第二个元素？两个元素占据同一行就可以了；第一个元素的文本中出现换行也可以；但两个元素之间的换行符是不可取的。这是一个解释我的意思的插图。

有没有办法做到这一点？我尝试将这两个元素作为跨度，并在它们之间放置一个不间断的空格，但这不起作用。

更新：这是一个快速而肮脏的 Codepen 示例：http://codepen.io/anon/pen/LkzBQJ

html:

<h1>\n  <span class="title-text">\n    This is some text\n  </span><span class="badge">yo!</span>\n</h1>\n<h1>\n  <span class="title-text">\n    This is some broken text\n  </span><span class="badge">yo!</span>\n</h1>\n

CSS：

h1 {\n  width: 350px;\n}\n\n.badge {\n  color: #f6511d;\n  display: inline-block;\n  border: 1px solid #f6511d;\n  border-radius: 3px;\n  font-size: 0.8em;\n  padding: 0.1em 0.2em;\n  line-height: 0.97em;\n  margin-left: 0.4em;\n  vertical-align: 1px;\n}\n

UPDATE2：在我的特定情况下，第一个元素中的文本和徽章都必须使用 JavaScript 动态呈现。因此，下面的 Ricardo\xe2\x80\x99s 解决方案（将文本的最后一个单词和徽章用 包裹在一个跨度中white-space: nowrap）虽然有效，但实现起来并不容易。

在Angular应用程序中,我有一个需要具有以下行为的超链接列表:

• 如果存在某种条件(例如,如果某个cookie的值为x),则单击超链接应该打开一个模态窗口;

• 如果不满足此条件(例如,如果cookie具有值y),则超链接应以其通常的方式操作并在新选项卡中打开链接.

超链接的格式如下:

<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
  {{article.title}}
</a>

我对如何实现这样的行为感到困惑.如果我离开都ng-href和ngclick指令,然后ng-href将插入网址和每次点击都会在新标签中打开一个页面.如果我删除该ng-href指令,那么在另一个选项卡中打开链接的唯一方法是通过javascript,但大多数浏览器都会阻止这种情况.我想不出ng-href有条件的方法(例如,写作<a ng-href="myCondition === true ? {{article.url}} : '#'">不起作用).

能否请您介绍一下如何在Angular中实现这样的功能？

我是RX的新手.这是我想要解决的问题的简单模型.它看起来很简单,但我很难找到合适的操作符(或以其他方式操作流)来解决它.

所以我们说我们有两个流.一个人经常发光; 另一个远不那么.我们希望每当第二个observable发出一个值时,取出该点另一个可观察者发出的最新值,然后用它做一些事情.

非工作示例:

let stream1 = Rx.Observable
    .interval(100);

let stream2 = Rx.Observable
    .interval(2000)
  .combineLatest(stream1, (stream2Value, stream1Value) => stream1Value)
  .do((stream1Value) => console.log('value:', stream1Value));

stream2.subscribe();

上面代码片段的问题在于它会等到stream2的第一个发出值然后开始以stream1的频率发出事件流.我想要的是获得一个以stream2的速率触发事件的流,但是会在stream2触发时发出stream1发出的最新值.听起来好像我需要stream1成为一个行为主题,以便我可以在stream2触发时访问它的最后一个值...但也许有一个更简单的解决方案？

TLDR：Typescript 中是否有一种方法可以声明一个包含扩展给定接口的所有类型的类型？

我的具体问题

我正在编写一个自定义 React 钩子，它封装了用于决定元素是否被鼠标悬停的逻辑。它大致模仿了这个钩子。它公开了一个应该能够接受任何 HTMLElement 的 ref：

const ref = useRef<HTMLElement>(null);

问题是，如果我尝试在任何特定的 React 元素上使用这个 ref，我会收到一个错误，告诉我这个特定的元素不完全是HTMLElement. 例如，如果我将它与 一起使用，则会HTMLDivElement收到此错误：argument of type HTMLElement is not assignable to parameter of type HTMLDivElement。

这是Typescript 游乐场中上述问题的一个简单重现案例

显然，我不想在我的钩子中列出所有 html 元素的类型。鉴于HTMLDivElement扩展HTMLElement类型，有没有办法声明我实际追求的类型不是严格的HTMLElement，而是扩展的HTMLElement？

反应代码示例

钩子的源代码

import { useRef, useState, useEffect } from 'react';

type UseHoverType = [React.RefObject<HTMLElement>, boolean];

export default function useHover(): UseHoverType {
  const [isHovering, setIsHovering] = …

（这是我之前提出的问题的更具体版本，但尚未收到任何答案；我希望它不违反SO的规则）

鉴于我有一个具有Sponsor模型和Sponsorship模型的Rails 4应用程序，因此a sponsor具有多个sponsorships，a sponsorship属于a sponsor，我想找到多个赞助数量大于，等于或小于一定数量的赞助者。为此，我尝试使用Ransack，该应用程序使用的搜索工具。

这是在Rails Console中执行我需要的命令（在这种情况下，返回拥有1个以上赞助者的赞助者）：

Sponsor.joins(:sponsorships).group("sponsors.id").having("count(sponsorships.id) > ?",1)  

能否请您帮我用此命令构建一个ransacker，以便我可以使用Ransack执行此功能？

（有人告诉我，通过在Rails中使用count_cache可以用一种完全不同的方法更好地解决我的问题，但是我仍然很乐意用Ransack做到这一点，如果没有其他作为示例的话。）

通常,在emacs上编辑JavaScript时,我使用flycheck和jshint来检查语法错误.所以我全局安装了jshint,并在.emacs文件中使用以下命令在js-mode中使用flycheck:

(require 'flycheck)
(add-hook 'js-mode-hook
          (lambda () (flycheck-mode t)))

但我也参与了一个项目,他们使用eslint来定义语法规则.我.dir-locals.el在该项目文件夹中有一个文件,目前只定义了所需的列表:

((nil . ((tab-width . 4)
         (js-indent-level . 4)))

 (js-mode . ((tab-width . 4)
             (js-indent-level . 4)))

 (html-mode . ((tab-width . 4)
               (sgml-basic-offset . 4))))

是否有可能在.dir-locals.el文件的帮助下告诉emacs在此特定项目文件夹中使用带有eslint的flycheck,同时在其余项目中继续使用带有jshint的flycheck？我听说以下几行应该是从jshint切换到eslint的技巧,但我不完全确定在哪里添加它们:

(setq flycheck-disabled-checkers '(javascript-jshint))
(setq flycheck-checkers '(javascript-eslint))

(你可以猜到,我对设置emacs并不是很好,所以我会非常感谢你的具体说明.)

这是我刚才提出的问题的扩展.然而这次问题更具体,更接近我正在努力的实际情况.

如果另一个元素中有一个元素,并且父元素和子元素都具有border-radius,并且父元素的背景与子元素不同,则它会在子元素的圆角周围可见.

如果父元素具有overflow: hidden属性,则问题会更加严重.然后,涉及使子元素的border-radius小于父元素的border-radius 的解决方案不再起作用.

CodePen上的示例:http://codepen.io/azangru/pen/pgmOvJ (观察子元素黑色背景下方的黄色背景).

HTML:

<div class="dark-bg">
  <div class="outer">
    <div class="middle">
      <div class="inner">
      </div>
    </div>
    <div class='some-text'>
      This is text. There can be quite a decent amount of text here, so the outer div needs to have overflow: hidden. Like this, you see?
    </div>
  </div>
</div>

CSS:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dark-bg {
  height: 100%;
  width: 100%;
  padding-top: 10px;
  background: black;
}

.outer …

TL;DR：您能否解释一下何时bundle-loader需要使用 Webpack 进行代码分割？

require当我开始将基于 Backbone 的应用程序从 Require.js 迁移到 Webpack 时，我记得路由器中的这种语句：

someMatchedRoute: function () {\n    require([\'path-to-file\'], function(module) {\n        // doing something with the loaded module\n        module();\n    });\n}\n

会将所需的代码与其余代码放在同一个包中，并且为了生成切换到特定路由时动态需要的单独文件，我需要使用bundle-loader，如下所示：

// a function executed when the user\xe2\x80\x99s profile route is matched\nsomeMatchedRoute: function () {\n    require(\'bundle!path-to-file\')(function(module) {\n        // doing something with the loaded module\n        module();\n    });\n}\n

现在，当我将代码库迁移到 ES6 模块并使用所述require.ensure语法时Webpack 文档中

someMatchedRoute: function () {\n    require.ensure([\'path-to-file\'], function(require) {\n        var …