[英]Why my last if statement in React.js doesn't work? I'm using jsx
What i want to do is to show movie not found when there isn't any movie to show.我想要做的是在没有任何电影可显示时显示未找到的电影。 The issue is with the last if conditional which doesn't grab the variable movieNotFound.
问题在于最后一个没有获取变量movieNotFound的条件。 I don't quite know if it is only beacuse if conditional in jsx doesn't work or is another issue.
我不太清楚这是否只是因为 jsx 中的条件不起作用或者是另一个问题。 I also had tried with ternary operator and same thing.
我也尝试过使用三元运算符和同样的东西。
const [isLoading, setisLoading] = useState(true);
const [movieNotFound, setmovieNotFound] = useState(false);
return (
<div>
{isLoading ? (
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
) : (
<>
if (movieNotFound === true)
{<h1>Movie not found</h1>} else
{
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>
}
</>
)}
</div>
);
}
export default MovieDetails;
Why not do this instead为什么不这样做呢
return (
<div>
{isLoading ? (
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
) : (
movieNotFound ?
<h1>Movie not found</h1> : (
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>
)
)}
</div>
);
Your if
is just text in the JSX output.您的
if
只是 JSX output 中的文本。 It's inside a fragment ( <>...</>
), but not inside an expression ( {...}
), so it's just text.它在片段(
<>...</>
)内,但不在表达式( {...}
)内,所以它只是文本。
You have several options for doing this.你有几个选项可以做到这一点。 I would just use
if
/ else if
/ else
prior to the return
:我只会在
return
之前使用if
/ else if
/ else
:
const [isLoading, setisLoading] = useState(true);
const [movieNotFound, setmovieNotFound] = useState(false);
let body;
if (isLoading) {
body =
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>;
} else if (movieNotFound) {
body = <h1>Movie not found</h1>;
} else {
body =
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>;
}
return <div>{body}</div>;
}
or you can use another conditional operator as you did for the previous thing in that same code:或者您可以使用另一个条件运算符,就像在同一代码中对前一件事所做的那样:
const [isLoading, setisLoading] = useState(true);
const [movieNotFound, setmovieNotFound] = useState(false);
return (
<div>
{isLoading ? (
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
) : (
<>
{movieNotFound
? <h1>Movie not found</h1>
:
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>
}
</>
)}
</div>
);
}
or use multiple mutually-exclusive expressions with &&
:或将多个互斥表达式与
&&
一起使用:
const [isLoading, setisLoading] = useState(true);
const [movieNotFound, setmovieNotFound] = useState(false);
return (
<div>
{isLoading ? (
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
) : (
<>
{movieNotFound && <h1>Movie not found</h1>}
{!movieNotFound &&
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>
}
</>
)}
</div>
);
}
Try this instead试试这个
{ movieNotFound && <h1>Movie not found</h1> }
{
!movieNotFound &&
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>
}
It is because if wont work inside JSX.这是因为 if 不能在 JSX 中工作。 No javscript will.
没有 javscript 会。 If you want to conditionally render content, you can assign the jsx to a variable, and change it to different JSX depending on a condition.
如果要有条件地渲染内容,可以将 jsx 分配给一个变量,并根据条件将其更改为不同的 JSX。 Something like this can be done:
可以这样做:
const MainPaymentPage =(props)=>{
const [isNextClicked,setNextClicked]=useState(false);
let componentCode=<IntroScreen click={()=>setNextClicked(true)}/>
if(isNextClicked){
componentCode=<Payment/>
}
return(
{componentCode}
)
}
export default MainPaymentPage;
componentCode is the variable which initially holds some JSX, and depending on isNextClicked, is value will change to completely different JSX. componentCode 是最初保存一些 JSX 的变量,根据 isNextClicked,is 值将更改为完全不同的 JSX。 Finally, the variable is rendered.
最后,渲染变量。
I think the following solution will work for you.我认为以下解决方案对您有用。 The If condition is not being implemented with correct syntax.
If 条件未使用正确的语法实现。 Try This:
尝试这个:
const [isLoading, setisLoading] = useState(true); const [movieNotFound, setmovieNotFound] = useState(false); return ( <div> {isLoading? ( <div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div> ): ( ()=> { if(movieNotFound === true) {<h1>Movie not found</h1>} else { <div> <h1>{movie.title}</h1> <h1>{movie.overview}</h1> </div> } } ) } </div> ); export default MovieDetails;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.