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>

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

1 个答案: