Reactjs 在React中的css中使用this.state_Reactjs_Api_This

Reactjs 在React中的css中使用this.state

reactjs api

Reactjs 在React中的css中使用this.state,reactjs,api,this,Reactjs,Api,This,我正在使用React、Axios和MovieDB API制作一个电影搜索应用程序。我遇到了一个问题，我想使const background=res.data['results'][0]['background\u path'] 这个.setState（{background}）在css中显示为背景图像。我不确定这是否可行，或者是否有更好的方法来做到这一点代码：从“React”导入React；从“axios”导入axios；导入“../CSS/style.CSS” 导出默认类Movieli

我正在使用React、Axios和MovieDB API制作一个电影搜索应用程序。我遇到了一个问题，我想使

const background=res.data['results'][0]['background\u path']
这个.setState（{background}）

在css中显示为背景图像。我不确定这是否可行，或者是否有更好的方法来做到这一点

代码：

从“React”导入React；
从“axios”导入axios；
导入“../CSS/style.CSS”
导出默认类Movielist扩展React.Component{
状态={
标题：“，
人气：“，
海报：「，
背景：“，
}
clickHandler=（事件）=>{
如果（event.keyCode===13）{
const query=event.target.value；
常量API_KEY='**************************'；
axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&query=${query}`）
。然后（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']
这个.setState（{poster}）；
const background=res.data['results'][0]['background\u path']
this.setState（{background}）
})
}
}
render（）{
返回(
this.clickHandler（事件）}/>
{this.state.title}
{this.state.popularity}
)
}
}

您可以使用

样式

道具设置背景图像，该道具必须是对象。比如说


const backgroundStyle={
backgroundImage:`url(https://image.tmdb.org/t/p/w500${this.state.background}`，
背景尺寸：“封面”
//您可以在此处使用任何其他样式特性
//请记住，钥匙必须用骆驼套，中间不能有破折号
//值必须是字符串
}
返回(
// ...
)

您的代码的完整解决方案

从“React”导入React；
从“axios”导入axios；
导入“../CSS/style.CSS”
导出默认类Movielist扩展React.Component{
状态={
标题：“，
人气：“，
海报：「，
背景：“，
}
clickHandler=（事件）=>{
如果（event.keyCode===13）{
const query=event.target.value；
常量API_KEY='**************************'；
axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&query=${query}`）
。然后（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']
这个.setState（{poster}）；
const background=res.data['results'][0]['background\u path']
this.setState（{background}）
})
}
}
render（）{
const backgroundStyle={
backgroundImage:`url(https://image.tmdb.org/t/p/w500${this.state.background}`，
背景尺寸：“封面”
}
返回(
this.clickHandler（事件）}/>
{this.state.title}
{this.state.popularity}
)
}
}

I将代码rught放在

const background=res.data['results'][0]['background\u path']this.setState（{background}）下

在我的原始代码中，并进行了更改，但它的意思是：

/src/components/Movielist.js第47:20行：“backgroundStyle”未定义没有未定义

您在

clickHandler

函数中定义了

backgroundStyle

，这就是错误的原因。我会用完整的代码更新答案。啊。工作完美我忘了你可以在渲染下编写香草JavaScript。谢谢你！我很高兴这有帮助。

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>

    )
  }
}