react中的高级条件组件渲染答案

【问题标题】：Advanced conditional component rendering in reactreact中的高级条件组件渲染
【发布时间】：2017-05-21 02:47:49
【问题描述】：

我在 jsx 中有一个链接。将来我可能会为链接创建新组件，但现在我想使用简单的 jsx。我还有一个布尔属性，它告诉我是否应该渲染链接。如果不是，我想在 span 或 div 中呈现纯文本。

这就是我现在的做法：

{isPassed && <a href={'/uri'}>
  <span>Import</span>
</a>}
{!isPassed && <span>Import</span>}

这就是我可能做得更好的方法：

{isPassed && <a href={'/uri'}>
  <span>Import</span>
</a> || <span>Import</span>}

处理这样的条件渲染的最佳做法是什么？我想让它更具可读性。第一个示例复制了条件，而在第二个示例中，将呈现什么并不明显。

【问题讨论】：

这两个例子不会做同样的事情。这是你的意图吗？
我想让它看起来更具可读性。

标签： reactjs react-jsx jsx

【解决方案1】：

您也可以尝试使用三元运算符，我们觉得它对我们来说非常易读。

{
  isPassed ? 
  <a href={'/uri'}><span>Import</span></a> : 
  <span>Import</span>
}

但是在多个条件的情况下，也可以写一个renderComponent方法，比如：

class SomeComponent extends Component {

    renderComponent(isPassed) {
      switch(isPassed) {
         case 0:
            return <span>One</span>
         case 1:
            return <span>Two</span>
         default:
            return <span>None</span>
      }
    }

    render() {
       return {
          <div>{ this.renderComponent(this.props.isPassed) }</div>
       }
    }
}

如果你有使用 props 的复杂组件，那么使用带有更多选项的渲染组件：

renderComponent({ isPassed, text }) {
  switch(isPassed) {
     case 0:
        return <span>One {text}</span>
     case 1:
        return <span>Two {text}</span>
     default:
        return <span>None</span>
  }
}

// Say this.props has => isPassed and text as a key
<div>{ this.renderComponent(this.props) }</div>

【讨论】：