基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
如果你有2个不同的依赖关系，你也可以在条件操作符中使用条件(三元)操作符。
{
(launch_success)
?
<span className="bg-green-100">
Success
</span>
:
(upcoming)
?
<span className="bg-teal-100">
Upcoming
</span>
:
<span className="bg-red-100">
Failed
</span>
}
其他回答
如果[…Else if]， Else 在React返回函数中检查不止一次?
{Element1? (<Element1/>) : Element2 ? (<Element2/>) : Element3 ? (<Element3/>) : Element... ? (<Element.../>) : (<ElementLast />)}
很多很棒的答案，但我还没有看到使用对象映射到不同的视图
const LOGS = {
info: <Info />,
warning: <Warning />,
error: <Error />,
};
const Notification = ({ status }) => <div>{LOGS[status]}</div>
你可以引入一个单独的方法来返回div元素并在return中调用它。我使用这种情况的例子，错误呈现取决于状态，如:
const renderError = () => {
if (condition)
return ....;
else if (condition)
return ....;
else if (condition)
return ....;
else
return ....;
}
render(){
return (
<div>
....
{renderError()}
</div>
);
}
你也可以写If语句组件。这是我在我的项目中使用的。
组件/ IfStatement.tsx
import React from 'react'
const defaultProps = {
condition: undefined,
}
interface IfProps {
children: React.ReactNode
condition: any
}
interface StaticComponents {
Then: React.FC<{ children: any }>
Else: React.FC<{ children: any }>
}
export function If({ children, condition }: IfProps): any & StaticComponents {
if (React.Children.count(children) === 1) {
return condition ? children : null
}
return React.Children.map(children as any, (element: React.ReactElement) => {
const { type: Component }: any = element
if (condition) {
if (Component.type === 'then') {
return element
}
} else if (Component.type === 'else') {
return element
}
return null
})
}
If.defaultProps = defaultProps
export function Then({ children }: { children: any }) {
return children
}
Then.type = 'then'
export function Else({ children }: { children: any }) {
return children
}
Else.type = 'else'
If.Then = Then as React.FC<{ children: any }>
If.Else = Else as React.FC<{ children: any }>
export default If
使用的例子:
<If condition={true}>
<If.Then>
<div>TRUE</div>
</If.Then>
<If.Else>
<div>NOT TRUE</div>
</If.Else>
</If>
四种条件渲染方式
(在功能组件的返回语句或类组件的渲染函数的返回语句中)
三元运算符
return (
<div>
{
'a'==='a' ? <p>Hi</p> : <p>Bye</p>
}
</div>
)
注意:只有条件'a'==='a'为真时，<p>Hi</p>才会在屏幕上显示。否则，<p>Bye</p>将显示在屏幕上。
逻辑运算符
和& &
return (
<div>
{
'a'==='a' && <p>Hi</p>
}
</div>
)
注意:只有条件'a'==='a'为真时，<p>Hi</p>才会在屏幕上显示。
或| |
export default function LogicalOperatorExample({name, labelText}) {
return (
<div>
{labelText || name}
</div>
)
}
注意:如果labelText和name两个道具都被传递到这个组件中，那么labelText将在屏幕中呈现。但如果只有一个(name或labelText)作为道具传递，那么传递的道具将在屏幕中呈现。
如果，否则，否则如果
return (
<div>
{
(() => {
if('a'==='b') {
return (
<p>Hi</p>
)
} else if ('b'==='b') {
return (
<p>Hello</p>
)
} else {
return (
<p>Bye</p>
)
}
})()
}
</div>
)
注意:必须使用匿名函数(还需要立即调用该函数)
Switch语句
return (
<div>
{
(() => {
switch(true) {
case('a'==='b'): {
return (
<p>Hello</p>
)
}
break;
case('a'==='a'): {
return (
<p>Hi</p>
)
}
break;
default: {
return (
<p>Bye</p>
)
}
break;
}
})()
}
</div>
)
注意:必须使用匿名函数(还需要立即调用该函数)
