如何为用户控件编写正确的反应代码？

Question

我正在使用 reactJS 构建 "usercontrols"，并且呈现部件的方法可能如下所示：

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>
            );
        }
});

问题是我找不到 hide/show 特定元素的简单方法。将 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>
            );
        }
    });

但是很难看到真正打印的标记是什么，它会涉及很多 repatativ 标记。

我不确定为什么必须将它拆分为一个函数和一个 return。在 ASP.NET MVC 中编写此代码时，if 语句就在标记中，并且始终只有一个地方可以查找标记的打印方式。

在 ASP.NET MVC

中看起来像这样

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

简洁易懂

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

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 只是语法糖，可以更好地嵌套 tag/component 创建与调用它转换为的常规函数。

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

对于相当简单的逻辑，嵌套 {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 个不同的部分组成 - 初始文本、linked 文本、图标或 link ed 图标和第二个 link 始终相同，在应显示第二个 link 的情况下它们之间有一个换行符。

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

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

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>
  }
})

如何为用户控件编写正确的反应代码？

How to write proper react code for usercontrol?

javascript

reactjs

react-jsx