反应不背景的背景网址的插值

问题描述：

我在教我自己反应，这很难，原谅我这里的坏话，因为这对我来说还是很新鲜的。反应不背景的背景网址的插值

我想写一个组件，将根据给出的道具在特定页面上渲染背景图像。我已经提出了插值这可能工作，但我没有达到我想要的效果。

所以我们说在我的组件调用blog.js我

<BgImage image="blog" />

然后我的组件应该使我有背景：

import React from 'react'; 
import styled from 'styled-components'; 
import blog from '../../static/blog.jpg'; 
import about from '../../static/about.jpg'; 
import contact from '../../static/contact.jpg'; 
import projects from '../../static/projects.jpg'; 

const BgBackground = styled.div` 
    width: 100%; 
    height: 400px; 
    position: absolute; 
    &::after { 
    background-size: cover; 
    content: ""; 
    opacity: 0.25; 
    height: 400px; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
    } 
` 

class BgImage extends React.Component { 
    render() { 
    return (
    <BgBackground style={{background: 'url' + this.props.image}} /> 
    ); 
    } 
} 

export default BgImage;

我没有得到一个错误，但我得到这些警告因为没有被使用：

3:8 warning 'blog' is defined but never used  no-unused-vars 
4:8 warning 'about' is defined but never used  no-unused-vars 
5:8 warning 'contact' is defined but never used no-unused-vars 
6:8 warning 'projects' is defined but never used no-unused-vars

我很茫然，不知道从这里做什么。有什么想法吗？（我很清楚有什么错误或破碎，我只是无法弄清楚）

答

试试这个。请记住，在反应，道具改为驼峰，所以用破折号性能没有任何影响：

<BgBackground style={{backgroundImage: 'url("${this.props.image}")' }} />

好吧，这使我100％的感觉，并感谢你。我希望它工作得如此糟糕，但我得到这个错误：'警告意外的模板字符串表达式no-template-curly-in-string' – sthig

删除单引号并用模板文字替换那些反蜱以使其工作。对不起（这是按钮是在你的键盘上的数字1的左侧，或在标签按钮的顶部） – Chris

仍然不呈现，但它感觉它应该！ arrg：D – sthig

答

<BgBackground style={{background-image: 'url("${this.props.image}")' }} />

不能做JSX破折号和它抛出这样的警告： '警告意外的模板字符串表达式无模板 - 卷曲在字符串“ – sthig

反应不背景的背景网址的插值

相关推荐