javascript - 如何在 React 渲染中优化 HTML 标记

Question

如何优化我的 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。

Answer 1

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

我建议您创建更多组件。以这 block 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>

做的事情很少，而且该 block 的用途不是很可读。如果您将其提取到另一个组件中并为其指定一个有意义的名称，您的标记将不会看起来那么困惑，并且您可以获得更好的可读性。