小编And*_*ndy的帖子
如何在React中响应自动调整大小的DOM元素的宽度？
我有一个使用React组件的复杂网页,我试图将页面从静态布局转换为响应更快,可调整大小的布局.但是,我一直遇到React的限制,我想知道是否有处理这些问题的标准模式.在我的特定情况下,我有一个组件呈现为带有display的div:table-cell和width:auto.
不幸的是,我无法查询我的组件的宽度,因为你无法计算元素的大小,除非它实际放在DOM中(它具有用于推导实际渲染宽度的完整上下文).除了将它用于相对鼠标定位之类的东西之外,我还需要这个来正确设置组件内SVG元素的宽度属性.
此外,当窗口调整大小时,如何在安装过程中将大小更改从一个组件传递到另一个组件？我们在shouldComponentUpdate中执行所有第三方SVG渲染,但您无法在自己或该方法中的其他子组件上设置状态或属性.
有没有一种使用React处理这个问题的标准方法？
推荐指数
解决办法
查看次数
在主干中查找创建分支的修订版
我正在尝试将最新的更改从trunk合并到我的项目的一个分支,但问题是我不知道我检查了哪个版本的主干我最终创建了分支.我想SVN会在某处记录下来.有谁知道如何找到修订号？
推荐指数
解决办法
查看次数
如何在生产中的Webpack项目中使用CDN中的库
我想react.min.js在生产中使用CDN(例如https://unpkg.com/react@15.3.1/dist/react.min.js)
让Webpack将我的import React from 'react'语句转换为const React = window.React而不是构建node_modules/react到bundle中的最佳方法是什么？
我一直这样做resolve.alias:
在index.html:
<head>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
<script type="text/javascript" src="/assets/bundle.js"></script>
</head>
在webpack.prod.config.js:
alias: {
react$: './getWindowReact',
},
getWindowReact.js:
module.exports = window.React;
注意:在旧的问题中,我没有意识到将React构建到Webpack包中NODE_ENV=production会剥离propTypes检查.其中一个答案侧重于此.
推荐指数
解决办法
查看次数
如何使用 AWS SDK v3 将流上传到 S3
我必须将文件从 API 端点传输到两个不同的存储桶。原始上传是使用：
curl -X PUT -F "data=@sample" "http://localhost:3000/upload/1/1"
文件上传的端点：
curl -X PUT -F "data=@sample" "http://localhost:3000/upload/1/1"
正如您所看到的，我使用两个PassThrough流，以便将请求流复制为两个可读流，如该 SO thread 中所建议的。
这段代码保持不变，这里有趣的是uploadToFirstS3和uploadToSecondS3函数。在这个最小的示例中，两者使用不同的配置执行完全相同的操作，我在这里仅使用一个。
什么效果好：
const PassThrough = require('stream').PassThrough;
async function uploadFile (req, res) {
try {
const firstS3Stream = new PassThrough();
const secondS3Stream = new PassThrough();
req.pipe(firstS3Stream);
req.pipe(secondS3Stream);
await Promise.all([
uploadToFirstS3(firstS3Stream),
uploadToSecondS3(secondS3Stream),
]);
return res.end();
} catch (err) {
console.log(err)
return res.status(500).send({ error: 'Unexpected error during file upload' });
}
}
这段代码（基于aws-sdk包）工作正常。我的问题是，我希望它与 …
推荐指数
解决办法
查看次数
如何使用Protractor/Selenium将鼠标移动到任意点
是否可以将鼠标移动到屏幕上的任意坐标/相对于量角器测试中的元素？我看到人们推荐使用Robot for Java用户,但当然我不能在JavaScript中使用它.
推荐指数
解决办法
查看次数
Access-Control-Allow-Origin:凭证标志为true时不允许使用"*",但没有Access-Control-Allow-Credentials标头
突然间,似乎没有改变我的网络应用程序中的任何内容,我在Chrome中打开它时开始出现CORS错误.我尝试添加Access-Control-Allow-Origin: *标题.然后我收到这个错误:
XMLHttpRequest cannot load http://localhost:9091/sockjs-node/info?t= 1449187563637. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3010' is therefore not allowed access.
但正如您在下图中看到的那样,没有Access-Control-Allow-Credentials标题.
WTF？Chrome bug？
我的页面被加载,http://localhost:3010该服务器也使用Access-Control-Allow-Origin: *没有问题.如果两个端点都使用它会有问题吗？
推荐指数
解决办法
查看次数
git:"master"的日志只能追溯到日期bug吗？
当我在工作副本中执行以下操作时:
> git diff 'master@{1 hour ago}'
它打印
warning: Log for 'master' only goes back to Thu, 14 Jan 2016 15:37:11 -0500.
然而,当我这样做时git log master,它显然可以追溯到更远的地方:
commit bb9c80fb1c3895a9c11f7a60710497cc8406e71f
Author: Andy Edwards <andy@example.com>
Date: Tue Jan 12 22:44:21 2016 -0600
...
我做错了什么,或者这是一个git bug？
推荐指数
解决办法
查看次数
有没有办法在开发模式下禁用或加速React PropType验证？
据我所知,禁用React PropType验证的唯一方法是uglify与process.env.NODE_ENV定义的React 'production'.
但是,我想在没有运行时PropType验证的情况下使用开发模式,原因如下:
- 他们显着减慢了我的应用程序.PropType验证是分析结果中的最高罪犯,因为:
- 我有一个相当深的组件层次结构,在多个级别上使用PropType验证(是的,我确实有适当的shouldComponentUpdate等)
- 我正在使用Redux,这意味着所有更新都从层次结构顶部或附近开始
- 我有鼠标拖动交互,每秒可以争取30次更新
- 我仍然希望看到所有其他React警告和错误,这些警告和错误也会在生产模式下被禁用.
- 无论如何,Flowtype显然可以在很多情况下静态验证PropTypes.
如果不出意外,我可以创造一个变压器babel-plugin-react-transform是除掉所有组件propTypes(或者也许只有这些部件的我以某种方式注释),但我不知道是否有一种简单的方法来做到这一点,因为阵营可能容易提供编译时标志以禁用PropType验证.
更新:该babel插件已经存在(https://www.npmjs.com/package/babel-plugin-react-remove-prop-types)
推荐指数
解决办法
查看次数
是否有任何简化的 YAML 格式变得普遍？
我喜欢 YAML。
等等，让我备份。我喜欢看起来像这样的 YAML，甚至比 JSON 还要多：
Projects:
C/C++ Libraries:
- libyaml # "C" Fast YAML 1.1
- Syck # (dated) "C" YAML 1.0
- yaml-cpp # C++ YAML 1.2 implementation
Ruby:
- psych # libyaml wrapper (in Ruby core for 1.9.2)
- RbYaml # YAML 1.1 (PyYaml Port)
- yaml4r # YAML 1.0, standard library syck binding
...
我也喜欢 YAML 锚点和引用，有时希望 JSON 有它们。
但我希望我们大多数人都同意以下内容不是那么容易阅读（我知道这个例子是说教的，但重点是因为它是有效的 YAML，与您合作的人可能会使用此类功能污染您的数据）：
!!map {
? !!str "sequence"
: !!seq [ !!str "one", !!str "two" ], …推荐指数
解决办法
查看次数
获取定义给定CSS类的<style>或<link>元素
假设我有
<head>
<style type="text/css" id="style1">
.foo {
...
}
</style>
<style type="text/css" id="style2">
.bar {
...
}
</style>
</head>
<body>
<div class="foo">
</div>
</body>
在Chrome DevTools中，<div class="foo">元素的样式检查器将具有指向定义<style id="style1">标签的链接.foo。
是否有任何DOM API可以有效地进行查找？
我能想到的找到<style>元素的唯一方法是像这样的低效率的蛮力搜索：
function findStyleElementForClass(cls) {
if (!cls.startsWith('.')) cls = '.' + cls
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i]
var rules = sheet.rules || sheet.cssRules
for (var j = 0; j < rules.length; j++) {
if …推荐指数
解决办法
查看次数
标签 统计
javascript ×2
reactjs ×2
branch ×1
cdn ×1
cors ×1
css ×1
cssom ×1
date ×1
diff ×1
dom ×1
git ×1
logging ×1
mousemove ×1
node.js ×1
performance ×1
point ×1
production ×1
protractor ×1
responsive ×1
revision ×1
selenium ×1
simplify ×1
stream ×1
svn ×1
validation ×1
webpack ×1
yaml ×1