小编NVI*_*NVI的帖子

我想在组件的根DOM元素中间放置一个圆圈:

var App = React.createClass({
    render: function() {
        return <svg ref="svg">
            <circle r="9" cx={this.centerX()} cy="15"/>
        </svg>;
    },
    centerX: function() {
        var svg = this.refs.svg.getDOMNode();
        return svg.offsetLeft + Math.round(svg.offsetWidth / 2);
    }
});

http://jsfiddle.net/NV/94tCQ/

鸡蛋和鸡蛋问题发生在这里:this.refs在第一次渲染时未定义.解决这个问题的最佳方法是什么？我宁愿不引用外部DOM节点(例如document.body).

我可以将HSB颜色转换为HSL吗？

Photoshop在其颜色选择器中显示HSB颜色.HSL颜色可以在CSS中使用.

我试过这个JS:

function hsb2hsl(h, s, b) {
  return {
    h: h,
    s: s,
    l: b-s/2
  }
}

而hsb2hsl(0, 100, 50).l == 0不是25

更新:如果不转换HSB→RGB→HSL,我可以这样做吗？

是否可以重写以下JavaScript递归函数以使其更快？

function clone_recursive(object) {
    var result = {};
    for (var key in object) {
        var value = object[key];
        if (typeof value === 'object') {
            result[key] = clone_recursive(value);
        } else {
            result[key] = value;
        }
    }
    return result;
}

我以迭代的方式重写了它,但它没有获得任何性能,实际上速度下降了≈20%.

function clone_iterative(object) {
    var result = {};
    var queue = [{base: result, value: object}];
    var item;
    while (item = queue.shift()) {
        var current = item.value;
        var base = item.base;
        for (var key in current) {
            var value = current[key];
            if (typeof …

我正在尝试制作标签组件.TabsSwitcher和TabsPanel必须是单独的组件,因此它们可以在DOM中的任何位置使用,例如TabsSwitcher不必跟随TabsPanel.

为了使它工作,我需要以某种方式连接这些组件.此外,TabsSwitcher必须能够在单击选项卡时告诉TabsPanel.

/** @jsx React.DOM */

var TabsExample = React.createClass({
    render: function() {
        var tabs = [
            {title: 'first', content: 'Content 1'},
            {title: 'second', content: 'Content 2'}
        ];
        return <div>
            <TabsSwitcher items={tabs}/>
            <TabsContent items={tabs}/>
        </div>;
    }
});

var TabsSwitcher = React.createClass({
    render: function() {
        var items = this.props.items.map(function(item) {
            return <a onClick={this.onClick}>{item.title}</a>;
        }.bind(this));
        return <div>{items}</div>;
    },
    onClick: function(e) {
        // notify TabsContent about the click
    }
});

var TabsContent = React.createClass({
    render: function() {
        var items = this.props.items.map(function(item) {
            return …

当一个人持有修改键(Shift,Alt,Ctrl)时,我的应用会更改其状态.我使用keydown/keyup事件跟踪修饰键:

var altPressed;
window.onkeydown = window.onkeyup = function(e) {
    altPressed = e.altKey;
}

键盘事件不会在浏览器选项卡外触发.现在,想象一下以下场景:

1. 按住Shift键
2. 点击我的应用程序的链接,它将在新窗口中打开
3. 释放Shift键

keyup 如果没有聚焦,事件将不会在我的页面上触发,因此当我再次专注于我的应用程序选项卡时,我的应用程序将显示它将显示仍然按下Shift键.

如果页面可见性事件具有修饰键属性,那将会很好.唉,他们没有.

document.addEventListener('webkitvisibilitychange', function(e) {
    if (document.webkitHidden) return;

    e.altKey // undefined :(

}, false);

require 'net/http'

urls = [
  {'link' => 'http://www.google.com/'},
  {'link' => 'http://www.yandex.ru/'},
  {'link' => 'http://www.baidu.com/'}
]

urls.each do |u|
  u['content'] = Net::HTTP.get( URI.parse(u['link']) )
end

print urls

此代码以同步方式工作.第一个请求,第二个,第三个.我想异步发送所有请求并urls在完成所有请求后打印.

最好的办法是什么？纤维是否适合这种情况？

您将获得一系列各种交通工具的旅行机票,这些机票将通过途中的几个站点将您从A点带到B点.所有的门票都没有故障,你不知道你的旅程从哪里开始,也不知道它的结束地点.按正确的顺序对门票进行排序以完成您的旅程.

tickets = [
  {from: "Barcelona", to: "New York"}
  {from: "Barcelona", to: "Gerona"},
  {from: "Madrid",    to: "Barcelona"},
  {from: "Gerona",    to: "Barcelona"}
]

我想,正确的顺序是:

tickets = [
  {from: "Madrid",    to: "Barcelona"},
  {from: "Barcelona", to: "Gerona"},
  {from: "Gerona",    to: "Barcelona"},
  {from: "Barcelona", to: "New York"}
]

因为没有去马德里的机票,也没有来自纽约的机票.

什么是该任务的最佳算法？

该语言是JavaScript,但与语言无关的解决方案就足够了.

更新:我更改了样本数据,以免与单程飞行问题混淆.

SVG线性梯度http://elv1s.ru/files/svg/gradient-hue.png

这样做一个渐变的正确方法是什么？我试过这个SVG:

<linearGradient id="hue" x1="0" y1="1" x2="0" y2="0">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="17%" stop-color="#ffff00"/>
    <stop offset="34%" stop-color="#00ff00"/>
    <stop offset="50%" stop-color="#00ffff"/>
    <stop offset="66%" stop-color="#0000ff"/>
    <stop offset="82%" stop-color="#ff00ff"/>
    <stop offset="100%" stop-color="#ff0000"/>
</linearGradient>

它有效,但仍然不够好:

SVG线性梯度http://elv1s.ru/files/svg/gradient-hue-reference.png

我可以看到这两个渐变之间的区别.有没有更好的方法呢？

演示:http://jsfiddle.net/NV/qQ5Cs/

/**
 * @jsx React.DOM
 */
var NumberField = React.createClass({
    render: function() {
        return <input type="number" value={this.props.value} onInput={this.onInput}/>;
    },
    onInput: function(e) {
        if (!this.props.onValueChange) {
            return;
        }
        var value = parseInt(e.target.value, 10);
        return this.props.onValueChange(value);
    }
});

var TempConverter = React.createClass({
    getInitialState: function() {
        return {c: 0};
    },
    render: function() {
        var c = this.state.c;
        return <p>
            <NumberField onValueChange={this.onChangeC} value={c}/> C
            <br/>
            <NumberField onValueChange={this.onChangeF} value={c2f(c)}/> F
        </p>;
    },
    onChangeC: function(c) {
        this.setState({c: c});
    },
    onChangeF: function(f) {
        this.setState({c: …

我想存储我应用的状态localStorage.是否有回调或事件触发状态变化？我会用它打电话localStorage.state = JSON.stringify(this.state).可能,使用0.5秒节流.

TodoMVC React示例使用localStorage作为存储.但是,它定义了事件处理程序中的保存和删除,例如keydown和click.对于我的情况,做同样的事情会产生很多样板.