React 和 jQuery Mobile 渲染问题答案

【问题标题】：React and jQuery Mobile Render IssuesReact 和 jQuery Mobile 渲染问题
【发布时间】：2023-03-04 17:37:01
【问题描述】：

我正在开发一些基于 React.js 的组件，用于渲染 jQuery Mobile 对象。

我创建了以下类：

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？

【问题讨论】：

标签： javascript jquery mobile reactjs

【解决方案1】：

对于数字 1，根据此答案 https://stackoverflow.com/a/22752418/930517，您需要使用 htmlFor 而不是 for。

在第 2 点，如果你交换它是否有效 React.DOM.div({'data-role':'fieldcontain', 'class':classStr}, 为React.DOM.div({'data-role':'fieldcontain', 'className':classStr},？

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

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

【讨论】：

是的，我正在使用 jQuery Mobile。我会尝试将其添加到 jsFiddle 并将链接放在这里。
我不能把它放在 jsFiddle 中，但我会在我的服务器上发布它。有帮助吗？

【解决方案2】：

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

1) 为什么没有添加标签的“for”属性？

这里的解决方案： React label element

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

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

【讨论】：