小编eri*_*gio的帖子

我知道有一个用于获取 NPM 下载计数的公共 API，以及基于它构建的工具，例如npm-stat和npmtrends。但是，我希望更详细地了解特定包按版本的下载情况。我没有在任何地方的 API 文档中看到这一点。是否可以？

随着 v5 的发布，Bootstrap 更新了多个组件的样式，包括关闭按钮。在 v5 之前，“x”是可以轻松设置样式的文本，包括从父级继承颜色。然而现在，该按钮使用背景 SVG 图像进行样式设置：

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #000;
  background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
  border: 0;
  border-radius: .25rem;
  opacity: .5;
}

在调整颜色方面，有一种使用 CSS 过滤器反转颜色的.btn-close-white 变体，但我想要特定的颜色。包含原始 SCSS 文件时，您可以更新$btn-close-color变量以更改颜色。但是，我在将 …

我遇到了类似于这个问题和其他几个症状的问题,虽然答案对我没有帮助.我正在尝试通过简单的HTML表单向Node应用程序提交密码,但请求正在保持空白状态.

服务器:

app.use(bodyParser.urlencoded({extended: true}));

router.post('/login', (req, res) => {
  console.log(req.body);
  console.log(req.headers['content-type']);
});

形成:

<form action="/login" method="post">
  <input type="password" id="password">
  <button type="submit">Log In</button>
</form>

如果我提交表格,我会得到以下内容:

{} // req.body
'application/x-www-form-urlencoded' // req.headers['content-type']

但是,如果我尝试卷曲端点,我会得到一个非空的req.body:

$ curl -X POST localhost:5000/login -d 'password=testpw'

// Output
{ password: 'testpw' }
'application/x-www-form-urlencoded'

我究竟做错了什么？

我正在尝试将现有网站转换为使用webpack,但所有现有的需求路径都是绝对的:

var Component = require('/path/to/my/component');

我一直在阅读webpack文档,也找到了关于解决路径的答案,但却无法解决我的问题.resolve.root根据上面答案中的说明进行设置时,我能够获得以下工作:

var Component = require('./path/to/my/component');
var Component = require('path/to/my/component');

但是,我仍然无法弄清楚如何使绝对路径工作,我真的不想不必经历并更新我的所有路径.这是网站结构:

/app
  /assets
    /javascripts
      /build
        package.js
      index.js
/node_modules 

webpack.config.js:

var JS_ROOT = __dirname + '/app/assets/javascripts');

module.exports = {
  entry: JS_ROOT + '/index',
  output: {
    path: JS_ROOT + '/build',
    filename: 'package.js'
  },
  ...
  resolve: {
    root: JS_ROOT
  }
};

我一直得到的错误是:

Module not found: Error: Cannot resolve 'file' or 'directory' /path/to/component in /Users/<username>/<ProjectRoot>/app/assets/javascripts

我究竟做错了什么？

我经常使用HOC为现有的React组件提供附加功能，这非常简单：

import Component from '/path/to/Component';
import higherOrderComponent from '/path/to/higherOrderComponent';

const EnhancedComponent = higherOrderComponent(Component);

但是，我需要包装一个简单的HTML input，它不作为独立的React组件存在。我试过了

const EnhancedInput = higherOrderComponent(<input />);

并得到以下错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

如何正确传递输入？

问题

我正在向客户端 React 应用程序添加错误边界。在开发中，我想在浏览器窗口中通过堆栈跟踪显示错误，类似于 create-react-app 或 nextjs 的错误覆盖。使用 webpack 的devtool选项，我能够生成具有正确文件名但行号错误的堆栈跟踪。

// This is what renders in the browser window
Error: You got an error!
    at ProjectPage (webpack-internal:///./src/pages/ProjectPage.tsx:96:11) // <-- 96 is the wrong line

// This is what shows up in the console
Uncaught Error: You got an error!
    at ProjectPage (ProjectPage.tsx?8371:128) // <-- 128 is the correct line

我尝试过的

• 这个答案建议不同的devtool设置，但我尝试过的设置都没有提供正确的行号。
• 这个答案建议更改retainLineswebpack 中的 babel 设置，但我没有使用 babel 来转译我的代码，我正在使用 ts-loader。另外，babel 文档建议这个选项对于不使用源映射的人来说是一个解决方法，这在这里不应该是一个问题。
• 这个答案 …

react-loadable使用Webpack 4和Babel 7进行服务器端渲染吗？按照说明操作,我无法成功运行.

在仅遵循客户端步骤之后,Webpack正确地为每个可加载组件输出单独的块,这在我在浏览器中加载页面时反映出来(即:块是延迟加载的).

但是,在执行所有SSR步骤之后,服务器将引发以下错误:

Error: Not supported
at loader (/Projects/test-project/web/routes/index.js:50:15)
at load (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:28:17)
at init (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:121:13)
at flushInitializers (/Projects/test-project//web/node_modules/react-loadable/lib/index.js:310:19)
at /Projects/test-project/web/node_modules/react-loadable/lib/index.js:322:5
at new Promise (<anonymous>)
at Function.Loadable.preloadAll (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:321:10)
at Object.preloadAll (/Projects/test-project/web/server.js:15:10)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (/Projects/test-project/web/node_modules/pirates/lib/index.js:83:24)

我的routes/index.js档案:

import React from 'react';
import Loadable from 'react-loadable';

import Loading from '../components/Loading';

export default [
  {
    path: '/',
    component: Loadable({
      loader: () => import('./controllers/IndexController'),
      loading: Loading,
    }),
    exact: true,
  },
  {
    path: '/home',
    component: Loadable({
      loader: …

我已经构建了一个基本的浏览器表单，允许用户上传 PDF 文件。然后我想将该文件发送到 Express 后端。看起来这应该是一个非常基本的操作，但我不熟悉端到端流程，所以我不确定哪个部分失败了。我搜索了许多 SO 问题/答案，但没有找到任何提供完整解决方案的问题，而且我也无法拼凑出解决方案。

更新：看起来文件正在到达服务器，但编码混乱。我的猜测是这FileReader.readAsText是错误的使用方法。FileReader.readAsBinaryString让我更接近一点，但仍然不太正确（并且已弃用）。FileReader.readAsArrayBuffer似乎可能是要走的路，但我不确定如何正确处理 Express 中的缓冲区。

客户端/浏览器

该表单是在 React 中构建的，并且只onChange在输入本身上使用一个处理程序。添加文件后，处理程序读取文件，将其添加到表单数据中，并将发布请求发送到服务器。

// React form
<input
  name="upload"
  onChange={this._handleUpload}
  type="file"
/>

_handleUpload = (e) => {
  const { files, name } = e.target;

  // Read the file
  const reader = new FileReader();
  reader.onload = (e) => {
    const file = e.target.result;

    // Now that we have the file's contents, append to the form data.
    const formData = new FormData();
    formData.append('file', …

我正在尝试使用react-bootstrap-typeahead控件，但我很震惊，试图让它做我想做的事。我的页面上实际上有 2 个，其中一个是进行真正的异步查找，另一个是我几乎想表现得像一个组合框。

我希望能够做的是选择一个项目，然后单击下拉菜单以改变主意并选择另一个项目。但是，如果您尝试这样做，当您再次展开列表时，它会自动过滤到您选择的项目。

例如，如果我使用演示页面上的基本示例并选择Alabama，则单击输入现在仅显示Alabama而没有其他选项。我希望这可以理想地将我返回到完整列表（这可能吗？）。

我希望整个菜单列表都显示 onFocus 而不是像下面给出的图片那样只显示所选元素。

<Typeahead
  labelKey="label"
  options={options}
  placeholder="Search.."
  onFocus={(e)=>this.onFocus(e)}
  onKeyDown={()=>this.onChange()}
  ref={(typeahead) => this.typeahead = typeahead}
  selected={this.props.single}
  renderMenuItemChildren={(option) => (
    <div onClick={(e)=>this.handleClick(e)} value={option.label}>
      {option.label}
    </div> 
  )}
/>

我在 Mac OS 10.11.5 (El Capitan) 中使用 MAMP 设置。这适用于 Web 服务器目的，但是当我尝试使用 PHP CLI 时，终端使用系统版本：

$ which php
/usr/bin/php

从我发现和阅读的所有内容来看，解决方案似乎是将 MAMP 版本添加到我的PATH：

PATH="$HOME/Applications/MAMP/bin/php/php5.6.10/bin:$PATH"

但是，在添加此内容后，关闭并重新打开窗口并获取文件，终端仍然找不到我想要的版本。