Question

我正在开发一些基于React.js的组件来渲染jQuery Mobile objets。

我创建了以下课程：

var JQueryMobileInputText = React.createClass({
  displayName: 'JQueryMobileInputText',

  getDefaultProps: function() {
    return {'name':'n'+uniqid(), 'label':'', 'type':'text', value:'', 
        'hideLabel':false
    }
  },

  render: function() {
    var label = React.createFactory('label');
    var input = React.createFactory('input');
    var classStr = this.props.class;
    if (this.props.hideLabel)
    {
        classStr += (classStr == "" ? '' : ' ') +  'ui-hide-label';
    }
    return (
      React.DOM.div({'data-role':'fieldcontain', 'class':classStr},
        label({'for':this.props.name}, this.props.label),
        input({'type':this.props.type, name:this.props.name, 
                id:this.props.name, value:this.props.value, 
                placeholder:this.props.label}
        )
    ));
  }
});
JQueryMobileInputText = React.createFactory(JQueryMobileInputText);

我将其称为如下：

 render: function() {
    return React.DOM.div(null,
      JQueryMobileForm(null,
        JQueryMobileInputText({name:'texto1', label:'Texto', hideLabel:true})
      ),
    );
  }

我期望跟随HTML作为结果：

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="texto1">Texto</label>
    <input type="text" name="texto1" id="texto1" value="" 
        placeholder="Texto"/>
</div>

但我得到的不同之处在于：

<div data-role="fieldcontain" data-reactid=".0.0.1.0.5.0" 
    class="ui-field-contain">
    <label data-reactid=".0.0.1.0.5.0.0">Texto</label>
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
        <input type="text" name="texto1" id="texto1" value="" placeholder="Texto" data-reactid=".0.0.1.0.5.0.1">
    </div>
</div>

我的问题是：

为什么没有添加标签的“for”属性？
为什么我的div类没有ui-hide-label字符串？
为什么为输入添加了新的div？

Answer 1

搜索互联网我解决了我的问题：

1）为什么标签的标签是＆＃39;财产没有添加？

这里的解决方案： React label element

2）为什么我的div类没有ui-hide-label字符串？

这里的解决方案： https://facebook.github.io/react/docs/class-name-manipulation.html

Answer 2

对于数字1，根据此回答https://stackoverflow.com/a/22752418/930517，您需要使用INSERT INTO zoo-table (name, field2, field3, field4) SELECT name, x, y, z FROM my_pets;代替htmlFor。

在数字2上，如果您进行交换，它是否有效 for的{{1}}？

最后，我建议页面上有其他代码来操作类名，并在输入中添加额外的div，因为上面提到的代码中都没有提到这些代码。

您使用的是除React之外的任何其他库吗？您可以在应用外测试您的组件（例如在jsFiddle中）吗？

React和jQuery Mobile渲染问题

2 个答案: