React 中的高级条件组件渲染

Question

我在 jsx 中有一个 link。将来我可能会为 link 创建新组件，但现在我想使用简单的 jsx。我还有一个布尔值属性，告诉我是否应该渲染 link 。如果不是，我想在 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>
       }
    }
}

此外，如果您有使用 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>

React 中的高级条件组件渲染

Advanced conditional component rendering in react

reactjs

react-jsx

jsx