小编eri*_*per的帖子

在React JSX中,似乎不可能做这样的事情:

render: function() {
  return (
    <{this.props.component.slug} className='text'>
      {this.props.component.value}
    </{this.props.component.slug}>
  );
}

我得到一个解析错误:意外的令牌{.这不是React可以处理的吗？

我正在设计这个组件,以便在引擎盖下,存储的值this.props.component.slug将包含有效的HTML元素(h1,p等).有没有办法让这项工作？

这在React版本0.12中运行得非常好:

componentDidMount: function () {
    var dom = this.getDOMNode();
}

该变量dom获取渲染组件的实际DOM节点.但是,将其转换为React 0.13并不能按预期工作:

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

我试过React.findDOMNode(this)哪个也行不通.基本上我只是试图获取渲染函数渲染的顶级dom节点而不使用ref.这可能吗？

我正在构建一个用于呈现HTML表单的React组件,并且我发现需要递归遍历我的父Form组件的所有子项,以便仅向某个Type的子组件添加额外的props.

一个例子(在JSX中):

<Form>
    <p>Personal Information</p>
    <Input name="first_name" />
    <Input name="last_name" />
    <Input name="email" />
    <Label>
        Enter Your Birthday
        <Input name="birthday" type="date" />
    </Label>
</Form>

在这个例子中,我在我的Form组件中使用React.Children.map,然后在map函数中我正在检查孩子的"type"和孩子的"type.displayName"来确定我正在处理的元素(本机HTML元素或ReactElement):

var newChildren = React.Children.map(this.props.children, function(child) {
    if (is.inArray(child.type.displayName, supportedInputTypes)) {
      var extraChildProps = {
        alertColor: this.props.alertColor,
        displayErrors: this.state.displayErrors
      }
      return React.cloneElement(child, extraChildProps);
    } else {
      return child;
    }
  }.bind(this));

我的问题是React.Children.map只是通过this.props.children进行了浅层迭代,我希望它还能检查孩子的孩子等等.我需要只为我的Input组件添加道具,以便他们知道何时显示错误,以及应显示错误消息的颜色等.在上面的示例中,生日输入不会收到必要的道具,因为它包含在Label组件中.

React.Children.map的任何计划都有一个"递归"模式或任何其他实用程序可以完成我正在尝试做的事情？

在一天结束时,我想编写一个函数来映射每个孩子(甚至是嵌套的孩子),以便对它进行操作(在这种情况下是克隆).

我有一个用例,我有一个Image组件,它具有必需的"src"属性和一个可选的"link"属性,如下所示:

var Image = React.createClass({

propTypes: {
  link: React.PropTypes.string,
  event: React.PropTypes.object,
  src: React.PropTypes.string.isRequired
},

handleClick: function(event, link) {
   analytics.track(event)
    .then(function() {
      window.location = link;
    });
},

render: function() {
  return (
    <img className='image' src={this.props.src} onClick={this.handleClick.bind(this, this.props.event, this.props.link)} />
  );
} });

如果我想在调用Image组件时有选择地包含可选道具,我该如何优雅地做到这一点？我最初的想法是做这样的三元表达式,除了这不是有效的JSX:

render: function() {
    return (
        <Image src={this.props.src} {this.props.link.hasOwnProperty('value') ? link=this.props.link.value : ''} />
    )
}

在上面的示例中,"this.props.link"是一个对象,可能包含也可能不包含名为"value"的属性,该属性包括单击Image时要浏览的超链接.此外,如果没有link.value存在,我宁愿简单地将它完全遗漏,而不是简单地提供一个空字符串作为"链接"道具的值.

我的理由是,在Image组件上我可以添加css"img:hover {cursor:pointer;}",只有当img实际链接到某处时,而不是全局设置它违反我的应用程序的UX规则.

我知道我可以简单地在三元组中渲染"链接"道具,如果它存在则包含链接的值,如果不存在则为空字符串,但为了好奇,我想看看是否还有另一个实现这一目标的方法.

我还想避免必须做一堆条件语句,这些语句创建了许多冗余的JSX代码,如下所示:

render: function() {
    if (this.props.link.hasOwnProperty('value')) {
        return <Image link={this.props.link.value} src={this.props.src.value} />;
    } else {
        return <Image src={this.props.src.value} />; …

http://www.polymer-project.org/resources/compatibility.html

我需要知道这个页面是如何更新的,我还特别想知道是否将Polymer/Platform应用到支持Android Browser 4.0+和IE9支持的生产应用程序中.

在Polymer元素中"需要"外部javascript的推荐方法是什么？例如,我正在构建一个我要在Slick轮播中显示的视频组组件.

例如,我的代码可能看起来像自定义元素:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">

<polymer-element name="polymer-video-group"  constructor="VideoGroupElement" attributes="">
  <template>
    <style>
      /* styles for the custom element itself - lowest specificity */
      :host {
          display: block;
          position: relative;
      }
      /* 
      style if an ancestor has the different class
      :host(.different) { } 
      */
    </style>

    <!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
        Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing
        https://docs.google.com/spreadsheets/d/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/pubhtml
    -->
    <polymer-jsonp id="jsonp" url="https://spreadsheets.google.com/feeds/list/1CpXbJHeFrzPpg58lWAsT1N3-QExbX9T5OPVeMfyBqYs/od6/public/values?alt=json-in-script&callback=" response="{{response}}"></polymer-jsonp>

    <template repeat="{{entry in response.feed.entry}}">
      <iframe width="420" height="315" src="//www.youtube.com/embed/{{entry.gsx$id.$t}}" frameborder="0" allowfullscreen></iframe>
    </template>

  </template>
  <script> …

我正在设置一个名为"locator-map"的自定义谷歌地图聚合物元素,它使用polymer-jsonp从谷歌电子表格中获取数据,获取响应,然后将其发送到自定义的"google-map"元素以绘制地图上的标记.我似乎无法弄清楚如何将从polymer-jsonp元素返回的数据实际注入到我的google-map元素中,以便它可以使用它来构建标记.

这是我的数据来源:https: //spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script

我按照这里的指示进行了初步设置:http: //www.html5rocks.com/en/tutorials/webcomponents/yeoman/

我的locator-map元素的代码:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="google-map.html">

<polymer-element name="locator-map" attributes="">
  <template>
      <style>
          /* styles for the custom element itself - lowest specificity */
          :host { display: block; }
          google-map {
              display:block;
              height:600px;
          }
      </style>

      <!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets)
          Format: https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script&callback=
          Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing
      -->
      <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script&callback=" response="{{locations}}"></polymer-jsonp>

      <ul>
          <template repeat="{{location in locations.feed.entry}}">
              <li>Name: {{location.gsx$name.$t}}
                <ul><li>Lat: {{location.gsx$lat.$t}}</li><li>Long: {{location.gsx$lng.$t}}</li></ul>
              </li>
          </template>
      </ul>

      <!-- …

之前我问过这个问题,但是使用React 0.12和它带来的JSX更改,我现在正在寻找另一种方法来实现这个功能.

这是在React 0.11中有效的代码:

return React.createClass({
    render: function() {

      var Tag = React.DOM[this.props.element];

      return (
        <Tag className='text'>
          {this.props.value}
        </Tag>
      );
    }
});

我正在创建一个组件,根据传入的名为"element"的prop来呈现不同的DOM元素.this.props.element将是一个诸如"p","h1"或"h2"等的值.虽然这在技术上有效,但我在控制台中看到一条警告消息:

Warning: Do not pass React.DOM.p to JSX or createFactory. Use the string "p" instead.
Warning: Do not pass React.DOM.h2 to JSX or createFactory. Use the string "h2" instead.

需要一些方向来帮助解释该警告,我找不到如何做这样的事情的好文档.