如何为样式分配道具值

Question

我正在使用create react app，我需要将prop值分配给组件的样式。在这种情况下，需要将背景图片“ url”作为样式的道具传递。

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} />;
  }
}

在下面的链接中找到代码： codcodesandbox示例

Answer 1

您可以创建样式对象并使用它更新组件样式道具，如下所示：

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

检查此代码更新