如何在反应渲染中优化 HTML 标记答案

【问题标题】：How optimize HTML markup in react render如何在反应渲染中优化 HTML 标记
【发布时间】：2015-07-14 16:50:07
【问题描述】：

如何优化我的 HTML 标记？在这种情况下（我使用 Sublime Text 2），我选择“设置语法 JSX”来突出显示，并且 emeet 起初不起作用。其次 - 对我来说更可取的是，将标记保留在一些 .tmpl 文件中。在这种情况下有可能吗？比如我的渲染方法：

render: function() {
    var result = this.state.data;
    var self = this;

    var inputNodes = result.map && result.map(function(item, keyIndex) {
      return (
        <div className="row" key={keyIndex} className={'inputs-row ' + (item.disabled ? 'inputs-row_disabled':'')}>
          <div className="col-md-12">
            <div className="col-md-6 form-group">
              <div className="input-group">
                <div className="input-group-addon">
                  <i className="fa fa-info fa-fw"></i>
                </div>
                <input className="key-input form-control" type='text' value={item.name} onClick={self.onInputKeyClick.bind(self,item)} readOnly />
              </div>
            </div>
            {
              item.values.map(function(value, valIndex) {
                return (
                  <div className="col-md-6 form-group" key={valIndex}>
                    <div className="input-group">
                      <input className="key-input form-control" type='text' value={value.name} onChange={self.changeLocalizedValue.bind(self, value, valIndex, keyIndex)} />
                      <div className="input-group-addon input-group-addon_btn">
                        <button className="btn btn-default btn_right-radius" onClick={self.sendItem.bind(self, value)}>
                          <i className="fa fa-check fa-fw"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      );
    });
    return (
      <div>
        <div>{inputNodes}</div>
        <button onClick={self.sendAll}>SEND ALL</button>
      </div>
    )
  }

附：我使用：gulp 和 browserify。

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

有些库可以让您将 React 模板提取到它们自己的文件中，但我认为 React 的优势之一是标记与视图逻辑位于同一位置。如果标记被更改，那么视图逻辑通常必须更改，反之亦然。将它们保存在同一个文件中会更方便。

我建议您创建更多组件。以这块 JSX 为例：

<div className="col-md-6 form-group">
  <div className="input-group">
    <div className="input-group-addon">
      <i className="fa fa-info fa-fw"></i>
    </div>
    <input className="key-input form-control" type='text' value={item.name} onClick={self.onInputKeyClick.bind(self,item)} readOnly />
  </div>
</div>

做的很少，而且那个块的目的是什么也不是很容易理解。如果您将其提取到另一个组件中并给它一个有意义的名称，您的标记将不会看起来很混乱，并且您会获得更好的可读性。

【讨论】：