Question

我正在尝试将背景作为道具传递给样式组件，但是我不确定如何通过cdn函数传递背景，因为它无法在CSS中正确输出

这是CSS的输出：

background: url(https://local.dev:5601/pub/media/icons/menu/function (props) { return props.background;}.png);

如何通过我的CDN函数传递道具？

config.js

    export function cdn(path) {
        return `https://local.dev:5601/pub/media/${path}`;
      }

      class Config {
        cdn
      }


  export default Config;

App.js

import React from "react";
import styled from 'styled-components'

const Circle = styled.span`
  display: block;
  position: relative;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border-radius: 50%;
  background: url("${cdn('icons/menu/' + (props => props.background) + '.png')}");
  margin: 5px;
`

const CircleWrap = styled.div`
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 5px 0;
`

class App extends React.Component {
  selectColor = (color) => {
    this.props.selectColor(color);
  }
  render() {
    return (
      <SettingDrop
        title={"Profilfarbe"}
        closeDropdown={this.props.closeDropdown}
        openDropdown={this.props.openDropdown}
        isOpen={this.props.isOpen}
        isHidden={this.props.isHidden}
        isValid={this.props.isValid}
        icon={<ProfilFarbe />}
      >
        <CircleWrap>
          {console.log(this.props.colors)}
          {this.props.colors.map( color =>
            <Circle
              background={color.hash}
              onClick={()=>this.selectColor(color.alias)}
            >
            </Circle>
          )}
        </CircleWrap>
      </SettingDrop>
    );
  }
};

Answer 1

以下语法将起作用：

background: url("${cdn('icons/menu/')}${props => props.background}.svg");

将背景作为道具传递给样式组件

1 个答案: