在 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"}

反之亦然。这可能吗？代码会在电影信息部分吗？这是在 React 上。

Answer 1

你需要

正确地将价格插入 JSX（${} 仅适用于模板文字）
将价格文本包围在另一个元素中，例如一个跨度，这样您就可以根据需要有条件地为该跨度着色

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

在 React 中使用三元表达式

Using a ternary expression in React

javascript

if-statement

conditional-operator

ternary

reactjs