我在 jsx 中有一个链接。将来我可能会为链接创建新组件，但现在我想使用简单的 jsx。我还有一个布尔props，它告诉我是否应该渲染链接。如果不是，我想在 aspan或div.
这就是我现在的做法：
{isPassed && <a href={'/uri'}>
<span>Import</span>
</a>}
{!isPassed && <span>Import</span>}
这就是我可能会做得更好的方法：
{isPassed && <a href={'/uri'}>
<span>Import</span>
</a> || <span>Import</span>}
像这样处理条件渲染的最佳实践是什么？我想让它更具可读性。第一个示例复制了条件，而在第二个示例中，将要呈现的内容并不明显。
您也可以尝试使用三元运算符，我们觉得它对我们来说非常易读。
{
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>