在React中使用三元表达式

Question

在此组件中:

const MovieComponent = (props) => {
const { Poster, Price, Title, cinemaWorldPrice } = props.movie;
return (
<MovieContainer>
<CoverImage src={Poster} alt="" />
<MovieName>{Title}</MovieName>
<InfoColumn>
<MovieInfo>FilmWorld: ${Price}</MovieInfo>
<MovieInfo>CinemaWorld: ${cinemaWorldPrice}</MovieInfo>
</InfoColumn>
</MovieContainer>
);
};

我想写一个三元表达式，将改变字体的颜色:

<MovieInfo>FilmWorld: ${Price}</MovieInfo>
<MovieInfo>CinemaWorld: ${Price}</MovieInfo>

基本上是在说

if (Filmworld Price > CinemaWorld Price) { Filmworld Price = color: "green"}

，反之亦然。这可能吗?代码会在电影信息部分吗?

Answer 1

你需要

• 正确地将价格插入JSX (${}仅用于模板文字)
• 将price文本包围在另一个元素中，例如span，因此您可以根据需要有条件地为span上色

const MovieComponent = (props) => {
const { Poster, Price, Title, cinemaWorldPrice } = props.movie;
return (
<MovieContainer>
<CoverImage src={Poster} alt="" />
<MovieName>{Title}</MovieName>
<InfoColumn>
<MovieInfo>
FilmWorld:
<span style={Price > cinemaWorldPrice ? { color: 'green' } : null}>{Price}</span>
</MovieInfo>
<MovieInfo>
CinemaWorld:
<span style={Price < cinemaWorldPrice ? { color: 'green' } : null}>{cinemaWorldPrice}</span>
</MovieInfo>
</InfoColumn>
</MovieContainer>
);
};