小编pht*_*ier的帖子

Facebook React.js:你如何在服务器上呈现statefull组件?

我认为我在概念上缺少使用React.js进行服务器端渲染的东西

假设我想创建一个页面来显示来自服务器端数据库的项目,并使用输入字段来过滤它们.

我想要一个页面:

  • 响应像这样的URL /items?name=foobar
  • 使用React输入字段按名称过滤项目
  • 使用React组件显示已过滤项目的列表

假设我有一个公共REST API来查询客户端的项目.

从概念上讲,我在第一次请求(GET /items?name=foobar)时想要做的是:

  • 我希望我的输入字段显示用户作为参数传递的内容,因此我需要将查询参数('foobar')传递给react组件,作为'prop'(如initialName)

所以我尝试了这个:

 // A stateful component, maintaining the value of a query field
 var ItemForm = React.createClass({
    getInitialState : function () {
        return {
            name : this.props.initialName
        };
    },
    handleInputValueChanged : function() {
        var enteredName = this.refs.query.getDOMNode().value.trim();
        this.props.onNameChanged(enteredName);
    },
    render : function () {

        return React.DOM.form({
            children : [
                React.DOM.label({
                    children : "System name"
                }),
                React.DOM.input({
                    ref : "query",
                    value : this.state.name,
                    onChange : this.handleInputValueChanged …
Run Code Online (Sandbox Code Playgroud)

reactjs isomorphic-javascript

29
推荐指数
1
解决办法
1万
查看次数

如何在React应用程序中更新document.title?

由于React没有任何内置的管理方法document.title,我曾经在componentDidMount路由处理程序中设置它.

但是现在我需要根据state异步提取修改标题.我开始投入分配componentDidUpdate,但我时不时地忘记将document.title作业放到某些页面中,之前的标题一直存在,直到我终于注意到它为止.

理想情况下,我想要一种以document.title声明方式表达的方式,而不必分配它.鉴于我希望能够在几个嵌套级别指定文档标题,某种"假"组件可能是最方便的:

  • 在顶层(默认标题);
  • 在页面级别(对于某些页面,但不是全部);
  • 有时,在内部组件级别(例如,用户键入字段).

其他要求:

  • 子项中指定的标题应覆盖父项指定的标题;
  • 可靠(保证路线变更时的清理);
  • 不应该发出任何DOM(即没有组件返回的黑客<noscript>);
  • 我正在使用react-router,但如果这个组件也可以与其他路由器一起工作,那就更好了.

我能用什么?

javascript dom reactjs react-router

28
推荐指数
3
解决办法
2万
查看次数

使用引用作为依赖项的类成员

我在内存管理语言上花了一些时间后回到C++,而且我突然想知道实现依赖注入的最佳方法是什么.(我完全卖给DI,因为我发现它是使测试驱动设计变得非常简单的最简单方法).

现在,浏览SO和谷歌在这件事上得到了很多意见,我有点困惑.

作为这个问题的答案,C++中的依赖注入,有人建议你不要传递原始指针,即使是依赖注入.据我所知,这与对象的所有权有关.

现在,在臭名昭着的谷歌风格指南中,也解决了对象的所有权问题(虽然没有详细说明我的州;)):http://google-styleguide.googlecode.com/svn/trunk/cppguide.xml#Smart_Pointers

所以我理解的是,为了使哪个对象拥有其他对象的所有权更清楚,你应该避免传递原始指针.特别是,它似乎反对这种编码:

class Addict {
   // Something I depend on (hence, the Addict name. sorry.)
   Dependency * dependency_;
public:
   Addict(Dependency * dependency) : dependency_(dependency) {
   }
   ~Addict() {
     // Do NOT release dependency_, since it was injected and you don't own it !
   }
   void some_method() {
     dependency_->do_something();
   }
   // ... whatever ... 
};    
Run Code Online (Sandbox Code Playgroud)

如果Dependency是一个纯虚拟类(又名穷人 - 接口),那么这个代码可以很容易地注入依赖的模拟版本(使用像google mock这样的东西).

问题是,我真的没有看到这种代码可以解决的问题,以及为什么我应该使用除了原始指针以外的任何东西!是不是很清楚依赖来自哪里?

另外,我读了很多帖子,暗示在这种情况下应该使用引用,这样的代码更好吗?

class Addict {
   // Something I depend on (hence, the Addict name. …
Run Code Online (Sandbox Code Playgroud)

c++ dependency-injection

24
推荐指数
2
解决办法
2万
查看次数

'oneof'protobuf字段的预期JSON序列化是什么?

假设我有一个像这样结构的.proto:

syntax = "proto3";

message Foo {
  ...
}
message Bar {
  ...
}

message Msg {
  string baz = 1;
  oneof some_union {
     Foo foo = 2;
     Bar bar = 3;
  }
}
Run Code Online (Sandbox Code Playgroud)

序列化此类消息的预期方式是什么?规范的JSON Mapping部分不是很清楚.

我可以看到至少两种表示方式,哪种方式正确?

第一种方式:在"顶层"有一个元素,忽略其他元素:

{
  "baz" : 0,
  "foo" : { ... }
}
Run Code Online (Sandbox Code Playgroud)

第二种方式:拥有一个带有联合名称的"unmbrella"属性,并给它一个字段.

{
  "baz" : 0,
  "some_union": {
    "foo" : { .... }
  }
}
Run Code Online (Sandbox Code Playgroud)

我应该期待什么?

json protocol-buffers

13
推荐指数
1
解决办法
1860
查看次数

您如何向人类解释CSS定位?

地球人.

我,身心相对理智,特此放弃了自己对CSS定位的理解.

关于CSS的在线资源很长,以解释"颜色"属性可以让你设置东西的"颜色".Unmöglish.

然后,如果你想要把东西给别的左侧(疯狂的想法,对吧?),所有你需要做的是将其设置为浮动到只要你设置了"相对"标志其父块左边这必须有一个祖父节点,其"绝对"标志设置为true,以便它相对于另一个可能包含或不包含任何内容,具有位置,大小或不具有的容器定位,具体取决于浏览器,其他东西的大小,可能还有月亮的阶段.(建议CSS专家不要认真对待上一段.我很确定有人会指出我的咆哮是无效的,或符合w3c标准 - 并且它只适用于IE6的瑞典测试版)

开玩笑,我正在寻找任何资源来解释CSS中布局背后所有疯狂的根本原因.从本质上讲,对于CSS来说,Crockford的文章对于Javascript来说是什么.

本着这种精神,让我指出,我不是在寻找像蓝图这样的CSS库或网格框架,也不是像小写这样的CSS扩展语言.我一直在使用它们来减轻我的痛苦,但我担心当他们说他们无法将自己的思想包裹在JS中的原型继承中时,就像告诉别人"只使用jQuery".

如果所有你能指出的是http://shop.oreilly.com/product/9781565926226.do,我想我会认为自己注定失败.

提前致谢.

编辑:我可能不应该谈论"定位"(感谢所有谁再次解释'位置:相对'并不意味着'相对于你的容器'和'位置:绝对'意味着相对于某些东西.我'从来没有如此接近用SO问题制作monty python脚本).我认为我的意思是一般的布局(定位+浮动+基线+所有将东西放在直线上所需的废话).

也请原谅咆哮的语调,我正试图将一些幽默倾注到沮丧中.如果可以的话,我会用禅技术冷静下来,但这只会让我想起 这个.

css

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

你能定义一个速度宏来"包装"其他内容吗?

我试图在生成的标记中抽象出一个常见的场景,我需要一些标记来"包装"任意内容.所以不要写这个

<div class="container">
   <p class="someClass">Some header</p>
   <div id="foo">
     <!-- The real content that changes -->
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我可以写一些"喜欢"的东西

#????
 <!-- The real content that changes
#end
Run Code Online (Sandbox Code Playgroud)

哪里显然我不知道#???? 将会.

据我所知,不可能用宏做这个,不能为块的开始定义一个宏,而为块的结尾定义一个宏.

#macro(startContained)
<div class="container">
   <p class="someClass">Some header</p>
   <div id="foo">
#end

#macro(endContained)
   </div>
</div>
#end

#startContained
<!-- The real content -->
#endContained
Run Code Online (Sandbox Code Playgroud)

有更好的方法吗?

html velocity

10
推荐指数
1
解决办法
1415
查看次数

是否值得在CSS中将"样式"与"布局"分开

CSS最大的麻烦之一就是如何恰当地定位东西是多么棘手.

现在我要努力去理解事情,我总是需要几次尝试才能猜出哪些必须浮动哪个方向与什么相关.

现在,我的麻烦是,我通常在某些时候有这样的代码:

<div class="someContainerThatWillWorkAsALine">
  <div class="someOtherContainerThatWillWorkAsAcolumn">
    <div class="StuffInAcolumn">
      ...
    </div>
Run Code Online (Sandbox Code Playgroud)

这样的课程的唯一目的是:

  • "孩子,请从左到右"
  • "除了你们,请从上到下"
  • "你,不要打扰你的兄弟,向左走5px,你已经停飞了"
  • "约翰尼,你是你品种的最后一个,请清除所有那些浮动的废话"

我有时会想知道我是在编写软件,还是试图找到合适的方法将天线转为接收旧式模拟电视.

"好吧,在右边再多一点,拜托......不,还没到那里.现在完美,别动!"

此外,这些类都没有真正的语义,所以这是非常辛苦,给他们一个有意义的名字.这使得CSS非常难以阅读,更糟糕的是,写起来非常困难,因为每次我必须选择一个名称"而另一类 - 那简单地告诉一个块"时,我会发生惊恐发作-act作为一种线".因为每个类名都是web2.0-y-one-page-site的全局,所以您不希望与使用过的名称冲突.

那么你如何解决这类问题呢?你呢 :

  • 保留"定位"(布局?)css代码与你的html内联,并将CSS限制为实际样式(如"这应该是蓝色,这应该用粗体写,等等......")?
  • 只需要一个"行为一行"和"行为一列"类(意思是你的html代码包含只处理布局的类),这有点打败了"保持布局摆脱我的html"精神?为其他案件提供更有意义的课程?
  • 使用公约名称?

欢迎任何想法.

css

9
推荐指数
2
解决办法
2550
查看次数

渲染多个不同类型的孩子做出反应

在反应中你可以做类似的事情:

var Wrap = React.createClass({
    render: function() {
        return <div>{ this.props.children }</div>;
    }
});

var App = React.createClass({
    render: function() {
        return <Wrap><h1>Hello word</h1></Wrap>;
    }
});
Run Code Online (Sandbox Code Playgroud)

这允许您将组件传递给另一个组件.但是,如果Wrap有另一个你可以把内容放入的div.请考虑以下事项:

var Wrap = React.createClass({
    render: function() {
        return (
          <div>
            <ul className="icons">
             // Another compoent should be passed here from App to render icons.
            </ul>
            { this.props.children }
          </div>
        );
    }
});

var App = React.createClass({
    render: function() {
        return <Wrap><h1>Hello word</h1></Wrap>;
    }
});
Run Code Online (Sandbox Code Playgroud)

在上面的示例中,您可以看到我不仅要传递App组件的子项,还要传递另一个组件的图标ul.这可能吗?

如果是这样,怎么样?

javascript reactjs

9
推荐指数
1
解决办法
5671
查看次数

是否有cmake函数来更新.pot文件?

我正在将项目从autotools迁移到cmake.我有关于gettext支持的问题.

现有的FindGettext.cmake模块提供了一个很好的功能:

GETTEXT_CREATE_TRANSLATIONS(foo.pot ALL fr.po de.po)
Run Code Online (Sandbox Code Playgroud)

你在哪里提供一个锅文件和翻译po fil; 该函数负责将po文件转换为gmo文件,并添加正确的安装目标以确保可以在运行时找到文件.一切都很好.

现在问题是:在添加新消息时,如何更新您的pot文件和po文件?

为此,autotools将生成一个"update-po"目标,(根据我的理解),使用包含翻译字符串的所有文件的列表读取POTFILES.in,将其与其他信息混合,最后调用xgetext生成宝.我认为相应的Makefile任务是包含以下内容的任务:

case `$(XGETTEXT) --version | sed 1q | sed -e 's,^[^0-9]*,,'` in \
  '' | 0.[0-9] | 0.[0-9].* | 0.1[0-5] | 0.1[0-5].* | 0.16 | 0.16.[0-1]*) \
 $(XGETTEXT) --default-domain=$(DOMAIN) --directory=$(top_srcdir) \
   --add-comments=TRANSLATORS: $(XGETTEXT_OPTIONS)  \
   --files-from=$(srcdir)/POTFILES.in \
   --copyright-holder='$(COPYRIGHT_HOLDER)' \
   --msgid-bugs-address="$$msgid_bugs_address" \
 ;; \
*) \
 $(XGETTEXT) --default-domain=$(DOMAIN) --directory=$(top_srcdir) \
   --add-comments=TRANSLATORS: $(XGETTEXT_OPTIONS)  \
   --files-from=$(srcdir)/POTFILES.in \
   --copyright-holder='$(COPYRIGHT_HOLDER)' \
   --package-name="$${package_gnu}ube" \
   --package-version='0.4.0-dev' \
   --msgid-bugs-address="$$msgid_bugs_address" \
 ;; \
 esac
Run Code Online (Sandbox Code Playgroud)

所以,在我重新发明轮子之前,是否有一个现有的cmake函数来做同样的事情?或者我是否必须找到xgettext可执行文件,列出文件,并手动执行此操作?makefile版本似乎相当复杂(虽然它似乎处理了很多情况); 我不介意具有写cmake的同等学历;)

谢谢

PH

cmake

8
推荐指数
1
解决办法
1447
查看次数

在主容器中定位网格项的内容(子网格功能)

关于CSS网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.

<div class="wrapper">
  <div>A</div>
  <div>B</div>
</div>
Run Code Online (Sandbox Code Playgroud)

.wrapper具有display: grid和网格属性的定义.

如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级?),这是否有意义?

<div class="wrapper">
  <div>A</div>
  <div>
    <div>B</div>
    <div>C</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗?

css css3 css-grid

8
推荐指数
2
解决办法
2105
查看次数