javascript - 如何为用户控件编写正确的 react 代码？

Question

我正在使用reactJS构建“用户控件”，并且呈现部件的方法可能如下所示:

var FeedTopic = React.createClass({
        render: function() {

            return (
                <div className="topic">
                    <div className="tUImgLnk">
                        <a title={this.props.data.UserName} target="_blank" href={this.props.data.UserInfoUrl}>
                            <img className="tUImg" src={this.props.data.UserPicSrc} />
                        </a>
                    </div>
                    <div className="tInfo">
                        <div className="tName">
                            <a title={this.props.data.UserName} target="_blank" href={this.props.data.UserInfoUrl}>{this.props.data.UserName}</a>
                        </div>
                        <div className="tTime">
                            <span>{this.props.data.DateCreated}</span>
                        </div>
                    </div>
                </div>
            );
        }
});

问题是我找不到一种简单的方法来隐藏/显示特定元素。将 if 语句放在 return 中不起作用。我可以写这样的东西:

var GridRow = React.createClass({
        render: function() {
            var row;

            row = this.props.cells.map(function(cell, i) {
                if(cell.Data.CellType == 1){
                    if(cell.Data.Text1URL != null && cell.Data.Text1URL.length>0){
                        return <td className={cell.Meta.HTMLClass} key={i}><a target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>{cell.Data.Text1}</a></td>     
                    }
                    else {
                        return <td className={cell.Meta.HTMLClass} key={i}>{cell.Data.Text1}</td>
                    }

                }
                else if(cell.Data.CellType == 2){
                    if(cell.Data.IconUrl.length > 0){
                        return <td className={cell.Meta.HTMLClass} key={i}><a target={cell.Data.URLTarget} href={cell.Data.IconUrl} title={cell.Data.Text1}><img alt={cell.Data.Text1} title={cell.Data.Text1} src={cell.Data.IconSrc} /></a></td>
                    }
                    else{
                        return <td className={cell.Meta.HTMLClass} key={i}><img alt={cell.Data.Text1} title={cell.Data.Text1} src={cell.Data.IconSrc} /></td>
                    }
                }
                else if(cell.Data.CellType == 3){
                    return <td className={cell.Meta.HTMLClass} key={i}>
                                <a className={cell.Data.Text1Class} target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>
                                    {cell.Data.Text1}
                                </a><br/>
                                <a className={cell.Data.Text2Class} target={cell.Data.URLTarget} href={cell.Data.Text2URL} title={cell.Data.Text2}>
                                    {cell.Data.Text2}
                                </a>
                            </td>       
                }
                else if(cell.Data.CellType == 4){
                    return <td className={cell.Meta.HTMLClass} key={i}>
                                {cell.Data.Text1}<br/>
                                <a className={cell.Data.Text2Class} target={cell.Data.URLTarget} href={cell.Data.Text2URL} title={cell.Data.Text2}>
                                    {cell.Data.Text2}
                                </a>
                            </td>       
                }

            }.bind(this));

            return (
                <tr>
                    {row}
                </tr>
            );
        }
    });

但是很难看出真正会打印什么标记，并且它将涉及大量重复标记。

我不确定为什么它必须分成函数和返回。当在 ASP.NET MVC 中编写此代码时，if 语句就在标记中，并且始终只有一个位置可以查找如何打印标记。

在 ASP.NET MVC 中它看起来像这样

<div>
  <% if (contition) { %>
     <div class="MyProfile">
        ...
     </div>
  <% } %>
</div>

它干净且易于遵循

我这样做是错误的方式还是这只是 react 的方式？

Answer 1

Im not sure why it have to be split up in a function and a return. When writing this in ASP.NET MVC the if statements goes right in the markup and there is always only one place to look for how the markup will be printed.

这是因为您正在编写 JavaScript 代码，而不是稍后将被解析和执行的模板。 JSX 只是语法糖，可以更好地嵌套标签/组件创建，而不是调用它转换为的常规函数​​。

因此，在组织条件逻辑时，您需要戴上编码帽。

对于相当简单的逻辑，嵌套 {someArray.map()}调用并使用{someStatement && <contents>}和{someStatement ? <contents> : <alt-contents>}条件语句可以帮助您完成大部分工作，但在这种情况下，您实际上有一个开关和一些嵌套条件语句，它们很快就会变得丑陋。

将渲染每种不同单元类型的逻辑拉入每种类型的函数中可能不会那么难看。这些可以是独立的(因为它们不使用对 this 的任何引用、组件本身内的方法，甚至新的 GridRowCell 组件中的方法，该组件本身可以根据单元格的类型应该渲染得足够复杂，需要完全特化。

<小时/>

这就是将渲染拆分为同一组件中的不同方法的样子:

var GridRow = React.createClass({
  render() {
    return <tr>
      {this.props.cells.map(function(cell, i) {
        return this['renderCellType' + cell.Data.CellType](cell, i)
      })}
    </tr>
  },

  renderCellType1(cell, i) {
    var contents = cell.Data.Text1
    if (cell.Data.Text1URL) {
      contents = <a target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>{contents}</a>
    }
    return <td className={cell.Meta.HTMLClass} key={i}>{contents}</td>     
  },

  renderCellType2(cell, i) {
    var contents = <img alt={cell.Data.Text1} title={cell.Data.Text1} src={cell.Data.IconSrc} />
    if (cell.Data.IconUrl) {
      contents = <a target={cell.Data.URLTarget} href={cell.Data.IconUrl} title={cell.Data.Text1}>{contents}</a>
    }
    return <td className={cell.Meta.HTMLClass} key={i}>{contents}</td>
  },

  renderCellType3(cell, i) {
    return <td className={cell.Meta.HTMLClass} key={i}>
      <a className={cell.Data.Text1Class} target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>
        {cell.Data.Text1}
      </a><br/>
      <a className={cell.Data.Text2Class} target={cell.Data.URLTarget} href={cell.Data.Text2URL} title={cell.Data.Text2}>
        {cell.Data.Text2}
      </a>
    </td>  
  },

  renderCellType4(cell, i) {
    return <td className={cell.Meta.HTMLClass} key={i}>
      {cell.Data.Text1}<br/>
      <a className={cell.Data.Text2Class} target={cell.Data.URLTarget} href={cell.Data.Text2URL} title={cell.Data.Text2}>
        {cell.Data.Text2}
      </a>
    </td>      
  }
});

完成此操作后，我发现渲染的网格行单元格由 3 个不同的部分组成 - 初始文本、链接文本、图标或链接图标以及始终相同的第二个链接，在应显示第二个链接的情况下，它们之间有一个换行符。

如果您沿着这些行而不是按单元格类型在顶层分解显示逻辑，可能会更容易遵循/更少的重复。

<小时/>

或者仅在存在嵌套条件逻辑的情况下内联条件和函数的混合:

var GridRow = React.createClass({
  render() {
    return <tr>
      {this.props.cells.map(function(cell, i) {
        var type = cell.Data.CellType
        var multiline = (type == 3 || type == 4)
        return <td className={cell.Meta.HTMLClass} key={i}>
          {type == 1 && this.renderCellType1(cell)}
          {type == 2 && this.renderCellType2(cell)}
          {type == 3 && <a className={cell.Data.Text1Class} target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>
              {cell.Data.Text1}
            </a>}
          {type == 4 &&  cell.Data.Text1}
          {multiline && <br/>}
          {multiline && <a className={cell.Data.Text2Class} target={cell.Data.URLTarget} href={cell.Data.Text2URL} title={cell.Data.Text2}>
            {cell.Data.Text2}
           </a>}
        </td>
      })}
    </tr>
  },

  renderCellType1(cell) {
    var contents = cell.Data.Text1
    if (cell.Data.Text1URL) {
      contents = <a target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>{contents}</a>
    }
    return contents   
  },

  renderCellType2(cell, i) {
    var contents = <img alt={cell.Data.Text1} title={cell.Data.Text1} src={cell.Data.IconSrc}/>
    if (cell.Data.IconUrl) {
      contents = <a target={cell.Data.URLTarget} href={cell.Data.IconUrl} title={cell.Data.Text1}>{contents}</a>
    }
    return contents
  }
})

<小时/>

或者引入一个新组件以使基本包装逻辑具有声明性:

var Wrap = React.createClass({
  render() {
    if (!!this.props.when) {
      var {when, withTag, ...props} = this.props
      return <this.props.withTag {...props}>{this.props.children}</this.props.withTag>
    }
    else {
      return this.props.children
    }
  }
})

var GridRow = React.createClass({
  render() {
    return <tr>
      {this.props.cells.map(function(cell, i) {
        var type = cell.Data.CellType
        return <td className={cell.Meta.HTMLClass} key={i}>
          {type == 1 && <Wrap withTag="a" when={ccell.Data.Text1URL} target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>
            {cell.Data.Text1}
          </Wrap>}
          {type == 2 && <Wrap withTag="a" when={cell.Data.IconUrl} target={cell.Data.URLTarget} href={cell.Data.IconUrl} title={cell.Data.Text1}>
            <img alt={cell.Data.Text1} title={cell.Data.Text1} src={cell.Data.IconSrc}/>
          </Wrap>}
          {type == 3 && <a className={cell.Data.Text1Class} target={cell.Data.URLTarget} href={cell.Data.Text1URL} title={cell.Data.Text1}>
            {cell.Data.Text1}
          </a>}
          {type == 4 && cell.Data.Text1}
          {multiline && <br/>}
          {multiline && <a className={cell.Data.Text2Class} target={cell.Data.URLTarget} href={cell.Data.Text2URL} title={cell.Data.Text2}>
            {cell.Data.Text2}
           </a>}
        </td>
      })}
    </tr>
  }
})