React 和 jQuery 移动渲染问题

Question

我正在开发一些基于 React.js 的组件，用于呈现 jQuery 移动对象。

我创建了以下 class:

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 的 class 没有 ui-隐藏标签字符串？
为什么要为输入添加新的 div？

Answer 1

网上搜索我解决了我的问题：

1）为什么标签的'for'属性没有添加？

解决方法如下： React label element

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

解决方法如下： https://facebook.github.io/react/docs/class-name-manipulation.html

Answer 2

对于数字 1，根据此答案，您需要使用 htmlFor 而不是 for。

关于2号，如果你交换它有用吗 React.DOM.div({'data-role':'fieldcontain', 'class':classStr}, 对于 React.DOM.div({'data-role':'fieldcontain', 'className':classStr},?

最后，我建议页面上还有其他代码可以操纵 class 名称并在您的输入周围添加额外的 div，因为您在上面发布的代码中都没有提到这些.

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

React 和 jQuery 移动渲染问题

React and jQuery Mobile Render Issues

javascript

mobile

jquery

reactjs