我正在尝试使用它，以便我的天气应用程序的视频背景将根据天气状况使用 React 进行更改。这是我的 App.js

import React, { useState } from "react";
import axios from 'axios';
import Background from './Background';


function App() {
  

  const [location,setLocation] = useState('')
  const [data,setData] = useState({})
 
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=681134f49a40ffa25a43fd6bd3a2f480`

  const searchLocation = (event) => {
      if(event.key === 'Enter') {
        axios.get(apiUrl + "&units=metric")
          .then((response) => {
          setData(response.data)
          console.log(response.data)
        })
      }
  }

  return (
    <div className="app">

      <div className="search">
        <input 
        value={location}
        onChange={event => setLocation(event.target.value)}
        onKeyPress = {searchLocation}
        placeholder='Enter Location'
        type="text"/>
      </div>

      <div className="container">

        <div>
          <Background weatherDescription = {data.weather ? <p>{data.weather[0].main}</p> : null} />
        </div>   

        <div className="top">
          <div className="location">
            <p>{data.name}</p>
          </div>
          <div className="temp">
            {data.main ? <h1>{data.main.temp.toFixed()}°C</h1> : null}
          </div>
          <div className="description">
            {data.weather ? <p>{data.weather[0].main}</p> : null}
          </div>
        </div>

        {data.name != undefined && 
          <div className="bottom">
            <div className="feels">
              {data.main ? <p className="bold">{data.main.feels_like.toFixed()}°C</p> : null}
              <p>Feels Like</p>
            </div>
            <div className="humidity">
              {data.main ? <p className="bold">{data.main.humidity}%</p> : null} 
              <p>Humidity</p>
              <p></p>
            </div>
            <div className="wind">
              {data.wind ? <p className="bold">{data.wind.speed.toFixed()} KPH</p> : null} 
              <p>Wind Speed</p>
            </div>
          </div>
        }

      </div>

    </div>
  );
}

export default App;

这是我的视频背景组件，Background.js

import React from "react";
import video1 from "./Videos/Clouds.mp4";
import video2 from "./Videos/Thunderstorm.mp4";

function Background(props) {


    const videos = [
        {
            name:"Clouds",
            background: video1

        },
        {
            name:"Thunderstorm",
            background: video2
        }
    ]


    return (
        <div>

            <video id="background" autoPlay loop muted>
                <source src = {props.weatherDescription === videos[0].name ? null : videos[0].background} type="video/mp4"/> 
            </video>

            
        </div>
    )
}



export default Background;

我已经在 App.js 中传递了 'weatherDescription' props 以便我可以在 Background.js 中使用它。我已经尝试过 If-else 并且我也尝试过三元运算符，但它并没有根据描述而改变。由于 weatherAPI 的工作方式，必须使用三元运算符来访问天气描述。

我对 React 很陌生，我很确定我正确地传递了 props 。你能看到我做错了什么吗？我已经尝试过 console.logging 的东西，但我运气不佳。