Estoy usando la aplicación create react y necesito asignar valores de props a un estilo del componente. En este caso, la imagen de fondo 'url' debe pasar como accesorios a los estilos.

Index.js

import React from "react";
import ReactDOM from "react-dom";

import Background from "./background";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Background source="./assets/image.jpg" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Background.js

import React from "react";

const styles = {
  backgroundImage: "url()"
};

export default class Background extends React.Component {
  render() {
    return <div style={styles.background} />;
  }
}

Encuentre el código en el siguiente enlace: ejemplo de codcodesandbox

2
Nipun Ravisara 20 oct. 2019 a las 08:53

1 respuesta

La mejor respuesta

Puede crear un objeto de estilo y actualizar el accesorio de estilo del componente con él de esta manera:


  render() {
    const style = {
      backgroundImage:`url(${this.props.image})`
    }
    return <div style={style} />;
  }

revisa esta actualización de código

5
Eslam Abu Hugair 20 oct. 2019 a las 06:03