小道具からの背景画像を設定しない

Question

小道具から背景画像を設定するにはどうすればよいですか？私はさまざまなバリエーションを試しましたが、それを働かせることはできません。 cssはHTMLで表示されていますが、イメージは表示されていません。

const cover = "http://www.w3schools.com/css/trolltunga.jpg"; 
 

 
class App extends React.Component { 
 
    render(){ 
 
    return(
 
     <div> 
 
     <h2>Hey</h2> 
 
     <Child image = {cover} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Child extends React.Component{ 
 
    render(){ 
 
    const style = { 
 
     backgroundImage: "url("+this.props.image+")", 
 
     backgroundSize: "100% 100%" 
 
    } 
 
    return(
 
     <div style={style}></div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById("app") 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 1

問題は、ウルdivがemptyであるbackground画像が表示されていない理由のthats。その内のいくつかのコンテンツを入れて、それが表示されます、これを試してみてください：

<div style={style}>Add background</div> 

jsfiddleをチェックし、ウルのコードが正しく動作しています。私はちょうど上の行を追加しました：https://jsfiddle.net/0z38gozj/