在 React 中使用 this.state in css

Question

我正在使用 React、Axios 和 MovieDB 制作电影搜索应用程序 API。我运行遇到了一个问题，我想让 const background = res.data['results'][0]['backdrop_path'] this.setState({ background }) 在 css 中显示为背景图像。我不确定这是否可行，或者是否有更好的方法。

代码：

import React from 'react';
import axios from 'axios';
import '../CSS/style.css'

export default class Movielist extends React.Component {
  state = {
    title: "",
    popularity: "",
    poster: "",
    background: "",
  }

    clickHandler = (event) => {
        if (event.keyCode === 13) {
           const query = event.target.value;
           const API_KEY = '************************';
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
      .then(res => {
        const title = res.data['results'][0]['title'];
        this.setState({ title });

        const popularity = res.data['results'][0]['popularity']
        this.setState({ popularity });

        const poster = res.data['results'][0]['poster_path']
        this.setState({ poster });

        const background = res.data['results'][0]['backdrop_path']
        this.setState({ background })


      })
        }
    }

  render() {
    return (
      <html style="background-image:URL(https://image.tmdb.org/t/p/w500${this.state.background})">
        <div>
      <input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
      <h1>{this.state.title}</h1>
      <h1>{this.state.popularity}</h1>
      <img src={`https://image.tmdb.org/t/p/w300${this.state.poster}`} />
      </div>
    </html>

    )
  }
}

Answer 1

您可以使用 style 属性设置背景图像，它需要是一个对象。例如


const backgroundStyle = {
  backgroundImage: `url(https://image.tmdb.org/t/p/w500${this.state.background})`,
  backgroundSize: "cover"
  // you can use any other style properties here
  // just keep in mind that key have to be camelCased, no dashes in between
  // and values have to strings
}

return (
  // ...
  <div style={backgroundStyle}>

  </div>
)

您的代码的完整解决方案，

import React from 'react';
import axios from 'axios';
import '../CSS/style.css'

export default class Movielist extends React.Component {
  state = {
    title: "",
    popularity: "",
    poster: "",
    background: "",
  }

    clickHandler = (event) => {
        if (event.keyCode === 13) {
           const query = event.target.value;
           const API_KEY = '************************';
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
      .then(res => {
        const title = res.data['results'][0]['title'];
        this.setState({ title });

        const popularity = res.data['results'][0]['popularity']
        this.setState({ popularity });

        const poster = res.data['results'][0]['poster_path']
        this.setState({ poster });

        const background = res.data['results'][0]['backdrop_path']
        this.setState({ background })


      })
        }
    }

  render() {
    const backgroundStyle = {
       backgroundImage: `url(https://image.tmdb.org/t/p/w500${this.state.background})`,
       backgroundSize: "cover"
     }

    return (
      <html style={backgroundStyle}>
        <div>
         <input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
         <h1>{this.state.title}</h1>
         <h1>{this.state.popularity}</h1>
         <img src={`https://image.tmdb.org/t/p/w300${this.state.poster}`} />
      </div>
    </html>

    )
  }
}

在 React 中使用 this.state in css

Use this.state in css within React

api

this

reactjs