将背景图像设置为反应中的道具

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

你应该导入你的背景img

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() { 
    ...
  }
}

编辑:这是基于传递道具的编辑更新代码.

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处理时,我的解决方案才有效.

如果图像来自其他网址,则不应导入网址并将其直接添加到道具中

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

Answer 2

风格是一个对象尝试

style={{backgroundImage: this.state.backgroundImage}}

此外，您不能在功能组件中使用构造函数和使用状态。要么将您的组件转换为常规反应组件并保持状态。或者在常规反应组件中包含状态部分，并将其作为道具传递给功能组件。@Kenneth Truong 在回答中也提到了这一点

要将其变成常规反应组件，您可以执行以下操作

class DeviceBlock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      backgroundImage: "url('url-to-background.png')",
      logo: "url('url-to-logo.png')";
    }
  }
  render() {
    return (
      <div className='device-blocking' style={{backgroundImage: 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>
    )
  }
}

你可以看到它在这里工作 https://codepen.io/anon/pen/zWexzO

更新

根据更新的问题，您还可以将其保留为功能组件并传递道具

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      backgroundImage: "url('url-to-background.png')",
      logo: "url('url-to-logo.png')";
    }
  }
  render() {
    return (
      <DeviceBlock 
        backgroundImage={this.state.backgroundImage}
        logo={this.state.logo}/>
    )
  }
}

const DeviceBlock = (props) => {
    return (
      <div className='device-blocking' style={{backgroundImage: 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>
    )
} 

https://codepen.io/anon/pen/OvdPOQ

app 组件只是演示您可以传递一些动态状态。您当然可以像在提供的代码中一样直接从 Play.init 函数渲染 DeviceBlock 组件（然后您可以忽略 App 组件部分）