小编gl0*_*l03的帖子

D3v4:d3.timeParse失败,带有UNIX纪元秒(%s)

我的数据集包括UNIX时间戳,例如"1509392160".我似乎无法解析那些使用d3.timeParse("%s"),返回null.

检查反向过程也d3.timeFormat失败了.官方示例和所有其他格式字符串工作:

var formatTime = d3.timeFormat("%B %d, %Y");
formatTime(new Date); // -> "June 30, 2015"
Run Code Online (Sandbox Code Playgroud)

但是,格式化为UNIX(毫秒)只会返回"%s"和"%Q"的"s"或"Q":

var formatTime = d3.timeFormat("%s");
formatTime(new Date); // -> "s"
Run Code Online (Sandbox Code Playgroud)

使用D3 v4.11.0 btw.我错过了什么?

javascript datetime d3.js

12
推荐指数
1
解决办法
1822
查看次数

React + styled-components:伪类中的内联数据 SVG 破坏了样式

在使用 styled-components 3.3.2 从react-boilerplate派生的应用程序中,我尝试在伪类中显示SVG,如下所示:

import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'

const Tab = styled.div`
  &:after {
    content: url("${arrowUp}");
    position: relative;
  }
  &.active:after {
    content: url("${arrowDown}");
  }
`;
Run Code Online (Sandbox Code Playgroud)

但是,第一次使用会content: url("${...}")破坏块中所有以下样式定义。

在这种情况下&.active:after,样式将被忽略,而定义position: relative中的样式&:after将被解析。

SVG 看起来格式正确,并且确实经过了 url 编码。然而,经过多次测试,SVG 中破坏样式的部分似乎是transform="translate(...)"属性中的括号,它没有进行 url 编码。他们应该是吗?

如果我在后台定义中分配 SVG 而不是伪类内容,一切都会按预期工作,因此一般设置似乎不存在问题。

这是一个错误吗?如果是的话在哪里?我该如何解决这个问题(除了在背景中使用 SVG)?我可以绕过数据解析并以某种方式简单地插入 SVG 文件 URL(作为 Webpack / React 新手询问)吗?

reactjs react-boilerplate styled-components

6
推荐指数
1
解决办法
2596
查看次数

反应复选框:event.preventDefault() 破坏 onChange 函数 - 为什么?

我刚刚发现一个流浪者event.preventDefault()正在破坏我的复选框处理onChange程序:

import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      accepted: false
    }
  }

  changeChecked = (event) => {
    this.setState((state) => ({
      accepted : !state.accepted
    }));
    event.preventDefault(); // <- this very bad
  }

  render() {
    return (
      <input
        type="checkbox" 
        onChange={this.changeChecked}
        checked={this.state.accepted}
      />
    );
  }
}

export default App;
Run Code Online (Sandbox Code Playgroud)

第一次单击时产生的行为是正确更新的状态,但复选框仅在下一次重新渲染时更改为其“选中”外观,例如。第二次点击。

这是为什么?受控组件独立于浏览器事件工作不是重点吗?

有人向我解释这一点肯定会减轻我花费数小时来简化复杂用例的痛苦。谢谢你!

更新:这是一个快速的Codepen 示例,演示了奇怪的行为。我添加了一个“未阻止的复选框”和一个包含已阻止onClick事件的复选框作为比较。onChange请注意,当我单击另一个复选框时,带有阻止的复选框如何其外观切换为实际状态。

javascript html-input dom-events preventdefault reactjs

6
推荐指数
1
解决办法
4945
查看次数

React:API 302 重定向到同一域时出现 CORS 错误

我有一个 React Web 应用程序 ( a.com),它与 ​​API (b.api ) 进行通信。

现在有一个特定请求,服务器会通过 302 重定向到另一个a.com位置来应答。Chrome 中会失败并出现 CORS 错误:

Access to XMLHttpRequest at 'https://a.com/redirectpath' (redirected from 'https://b.api/requestpath') from origin 'https://a.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

与错误消息相反,触发的重定向的预检请求似乎已origin: null设置。这是问题所在吗?如果重定向到用户所在的同一域,为什么会发生这种情况(a.com ),为什么会发生这种情况?

谢谢你的任何想法!

cors reactjs axios

4
推荐指数
1
解决办法
4873
查看次数