反應不背景的背景網址的插值

我在教我自己反應，這很難，原諒我這裏的壞話，因爲這對我來說還是很新鮮的。反應不背景的背景網址的插值

我想寫一個組件，將根據給出的道具在特定頁面上渲染背景圖像。我已經提出了插值這可能工作，但我沒有達到我想要的效果。

所以我們說在我的組件調用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

我很茫然，不知道從這裏做什麼。有什麼想法嗎？（我很清楚有什麼錯誤或破碎，我只是無法弄清楚）

來源

2017-05-28 sthig

試試這個。請記住，在反應，道具改爲駝峯，所以用破折號性能沒有任何影響：

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

來源

2017-05-28 22:34:42 Chris

好吧，這使我100％的感覺，並感謝你。我希望它工作得如此糟糕，但我得到這個錯誤：'警告意外的模板字符串表達式no-template-curly-in-string' – sthig

刪除單引號並用模板文字替換那些反蜱以使其工作。對不起（這是按鈕是在你的鍵盤上的數字1的左側，或在標籤按鈕的頂部） – Chris

仍然不呈現，但它感覺它應該！ arrg：D – sthig

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

來源

2017-05-28 22:24:21 Hevar

不能做JSX破折號和它拋出這樣的警告： '警告意外的模板字符串表達式無模板 - 捲曲在字符串「 – sthig

反應不背景的背景網址的插值

回答

相關問題