基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
很多很棒的答案，但我还没有看到使用对象映射到不同的视图
const LOGS = {
info: <Info />,
warning: <Warning />,
error: <Error />,
};
const Notification = ({ status }) => <div>{LOGS[status]}</div>
其他回答
你应该记住TERNARY运算符
:
你的代码是这样的，
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
{
this.props.hasImage ? // if has image
<MyImage /> // return My image tag
:
<OtherElement/> // otherwise return other element
}
</div>
)
}
你可以使用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>
);
}
如果你想使用If, else If和else则使用此方法
{this.state.value === 0 ? (
<Component1 />
) : this.state.value === 1 ? (
<Component2 />
) : (
<Component3 />
)}
也许我来晚了。但我希望这能帮助到一些人。首先分离这两个元素。
renderLogout(){
<div>
<LogoutButton onClick={this.handleLogoutClick} />
<div>
}
renderLogin(){
<div>
<LoginButton onClick={this.handleLoginClick} />
<div>
}
然后你可以使用if else语句从render function调用这些函数。
render(){
if(this.state.result){
return this.renderResult();
}else{
return this.renderQuiz();
}}
这对我很有用。：）
如果你有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>
}
