reactjs - 在react中将背景图片设置为prop

Question

我有一个 react 组件，需要从父 Play 组件获取背景图像，而不是在样式表中设置。我试图将它作为组件传递给组件，但不太确定如何使其工作:

主要成分

import React from 'react'
import ReactDOM from 'react-dom'
import DeviceBlock from '/DeviceBlock/DeviceBlock'

const Play = {
  init() {
    const container = document.getElementById('blocker-container');
    if(container) {
      ReactDOM.render(
        <DeviceBlock
        backgroundImage={'background-image-url.png'}
        logo={'url-to-logo.png'} />,
        container
      )
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  Play.init()
})

阻止组件导入到上述 Play 组件中

import React from 'react'
import './DeviceBlock.scss'

function DeviceBlock (props) {
  constructor(props) {
    super(props)
    this.state = {
      backgroundImage: backgroundImage,
      logo: logo;
    }
  }
  return (
    <div className='device-blocking' style={this.state.backgroundImage}>
      <div className='container'>
        <div className='logo'>
          <img src='{{this.state.logo}}' />
        </div>
        <div className='message'>
          <h1>Content</h1>
          <a href='/' className='btn btn--primary btn--lg'>Link</a>
        </div>
      </div>
    </div>
  )
}

export default DeviceBlock

Answer 1

您应该导入您的背景图片

import BackgroundImage from '...png'; // Relative Path to BackgroundImage
import Logo from '...png'; // Relative Path to Logo

在您所在的州

this.state = {
  backgroundImage: `url(${BackgroundImage})`,
  logo: Logo
};

我还注意到你的<img>错了

<img src='{{this.state.logo}}' />

应该是

<img src={this.state.logo} />

另请注意，我看到您在函数内添加了一个构造函数。如果你想创建一个带有状态的 React 组件，你需要使该组件成为一个类。

class DeviceBlock extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() { 
    ...
  }
}

EDIT: This is the updated code for your edit based on passing through props.

import React from 'react'
import ReactDOM from 'react-dom'
import DeviceBlock from '/DeviceBlock/DeviceBlock'
import BackgroundImage from '../url-to-background.png'; // Path to BackgroundImage
import Logo from 'url-to-logo.png'; // Relative Path to Logo

const Play = {
  init() {
    const container = document.getElementById('blocker-container');
    if (container) {
      ReactDOM.render(
        <DeviceBlock
          backgroundImage={BackgroundImage}
          logo={Logo} 
        />,
        container
      )
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  Play.init()
})

import * as React from 'react'
import './DeviceBlock.scss'

function DeviceBlock (props) {
  return (
    <div 
      className='device-blocking' 
      style={{ backgroundImage: `url(${props.backgroundImage})` }}
    >
      <div className='container'>
        <div className='logo'>
          <img src={props.logo} />
        </div>
        <div className='message'>
          <h1>Content</h1>
          <a href='/' className='btn btn--primary btn--lg'>Link</a>
        </div>
      </div>
    </div>
  );
}

export default DeviceBlock

请注意，仅当您的图像来自您自己的服务器并通过 webpack(而不是其他 URL)处理时，我的解决方案才有效。

如果图像来自另一个 URL，则不应导入 URL 并将其直接添加到 props

<DeviceBlock
  backgroundImage="url-to-background.png",
  logo="url-to-logo.png"
/>