Question

如何优化HTML标记？在这种情况下（我使用Sublime Text 2），我选择“set syntax 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>
    )
  }

P.S。我使用：gulp和browserify。

Answer 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>

做得很少，而且这个块的目的不是很可读。如果您将其提取到另一个组件中并为其指定一个有意义的名称，那么您的标记看起来就不会那么混乱，并且您可以获得更好的可读性。

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

1 个答案: