基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
if else结构的简写在JSX中可以正常工作
这个道具。hasImage ?<我的形象/>:< some therement >
你可以在DevNacho的这篇博客文章中找到其他选项，但更常见的是用速记。如果你需要一个更大的If子句，你应该写一个返回组件a或组件B的函数。
例如:
this.setState({overlayHovered: true});
renderComponentByState({overlayHovered}){
if(overlayHovered) {
return <OverlayHoveredComponent />
}else{
return <OverlayNotHoveredComponent />
}
}
你可以从中解构你的overlayhovers。状态，如果你给它作为参数。然后在render()方法中执行该函数:
renderComponentByState(这个state university)。
其他回答
if then的简写
{ condition ? <Element1/> : null }
类型1:If语句样式
{props.hasImage &&
<MyImage />
}
类型2:If else语句样式
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
你也可以写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>
我用了一个三元运算符，它对我来说工作得很好。
{item.lotNum == null ? ('PDF'):(item.lotNum)}
你可以使用if, else这样的条件语句来呈现任何东西:
render() {
const price = this.state.price;
let comp;
if (price) {
comp = <h1>Block for getting started with {this.state.price}</h1>
} else {
comp = <h1>Block for getting started.</h1>
}
return (
<div>
<div className="gettingStart">
{comp}
</div>
</div>
);
}
