javascript - 在 react 中添加变量以要求

Question

如何将变量 bgImg 添加到 background-image URL？

let bgImg = props=>props.bgImg;

//this will show error
export const Users = styled.div`
    background-image: url(${require('../../assets/images/' + {bgImg} + '.svg')});
    background-image: url(${require('../../assets/images/' + ${bgImg} + '.svg')});
`;

我试过了，没用

let x = '../../assets/images/';
let bgImg = props=>props.bgImg;
let result = x + bgImg + ".svg";

结果有误

../../assets/images/function bgImg(props) {
    return props.bgImg;
}.svg

我怎样才能得到那个返回属性？

Answer 1

您正在寻找的功能可能是动态导入

import("./math").then(math => {
  console.log(math.add(16, 26));
});

但您会发现特别有用的是 Loadable 实现:

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

也许这就是您正在寻找的:

Loadable.Map({
  loader: {
    Bar: () => import('./Bar'),
    i18n: () => fetch('./i18n/bar.json').then(res => res.json()),
  },
  render(loaded, props) {
    let Bar = loaded.Bar.default;
    let i18n = loaded.i18n;
    return <Bar {...props} i18n={i18n}/>;
  },
});