反应中的高级条件组件渲染

Question

我在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>}

像这样处理条件渲染的最佳实践是什么？我想让它更具可读性.第一个示例复制条件,在第二个示例中,不明显将要呈现的内容.

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

此外,如果您使用道具有复杂的组件,那么使用带有更多选项的渲染组件:

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>