Ist es möglich, if...else...-Anweisungen in React-Renderfunktionen zu verwenden?
P粉760675452
2023-08-23 18:27:14
<p>Grundsätzlich habe ich eine Reaktionskomponente, deren <code>render()</code> wie folgt aussieht: (Dies ist mein Ideal, was bedeutet, dass es derzeit nicht funktioniert)< /p> ;
<pre class="brush:js;toolbar:false;">render(){
zurückkehren (
<div>
<Element1/>
<Element2/>
// Hinweis: Nur Logik, Code funktioniert hier nicht
if (this.props.hasImage) <ElementWithImage/>
sonst <ElementWithoutImage/>
</div>
)
}
</pre>
<p><br /></p>
实际上有一种方法可以完全满足OP的要求。只需渲染并调用匿名函数,如下所示:
不完全一样,但有解决方法。 React 文档中有一个关于条件渲染的部分,您应该看一下。以下是使用内联 if-else 可以执行的操作的示例。
您还可以在渲染函数内处理它,但在返回 jsx 之前。
还值得一提的是 ZekeDroid 在评论中提出的内容。如果您只是检查条件并且不想呈现不符合条件的特定代码段,则可以使用
&& 运算符
。