为什么我在 React.js 中的最后一个 if 语句不起作用？我正在使用 jsx

Question

我想做的是在没有电影可播放的情况下显示找不到的电影。问题在于最后一个if条件，它没有获取变量movieNotFound。我不太清楚这是因为jsx中的条件不起作用还是另一个问题。我也试过用三元运算符和同样的东西。

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;

Answer 1

您的if只是JSX输出中的文本。它在片段(<>...</>(中，但不在表达式({...}(中，所以它只是文本。

你有几种选择。我只会在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>;
}

或者你可以使用另一个条件运算符，就像你在同一代码中对前一件事所做的那样：

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>
);
}

或者与&&:一起使用多个互斥表达式

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>
);
}

Answer 2

为什么不改为

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>
);

Answer 3

请改用

{ movieNotFound && <h1>Movie not found</h1> }
{ 
!movieNotFound &&
<div>
<h1>{movie.title}</h1>
<h1>{movie.overview}</h1>
</div>
}

Answer 4

这是因为if在JSX内部不起作用。没有javscript会。如果要有条件地呈现内容，可以将jsx分配给一个变量，并根据条件将其更改为不同的jsx。可以这样做：

const MainPaymentPage =(props)=>{
const [isNextClicked,setNextClicked]=useState(false);
let componentCode=<IntroScreen click={()=>setNextClicked(true)}/>
if(isNextClicked){
componentCode=<Payment/>
}
return(
{componentCode}
)
}
export default MainPaymentPage;

componentCode是最初包含一些JSX的变量，根据isNextClicked，is值将更改为完全不同的JSX。最后，对变量进行渲染。

Answer 5

我认为以下解决方案将适用于您。If条件未使用正确的语法实现。试试这个：

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;