React.Js背景画像が適切に表示されます。

Question

私は基本的に、このウェブサイトをレッスンとして自分自身を教えるためにコピーしようとしています。

http://www.milkbardigital.com.au/#home

誰かがそれがページ上の高さの同じ量で表示するようにする方法、また、私は背景として画像を使用して、それの上にテキストを配置するのに役立つだろうか？ここで

は私の現在のコード

import React from 'react'; 
import {Image} from 'react-bootstrap'; 

export default React.createClass ({ 
    render() { 
     var background = {backgroundSize : 'cover'}; 
     return (
      <div style={{width: 'auto'}}> 
       <Image style = {background} responsive src = "http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg"> 
        This is a test 
       </Image> 
      </div> 
     ); 
    } 
}); 

は本当に助けに感謝です！

Answer 1

あなたが直面している問題は、Imageコンポーネントがvoid要素タグであり、childrenまたはdangerouslySetInnerHTML関数を受け取れないことです。

次のように、CSSとImageコンポーネントの外側にテキスト（またはDIV）要素を使用する必要があります。ここでは

var App = React.createClass ({ 
    render() { 
     var background = {backgroundSize : 'cover'}; 
     var textStyle = { 
      position: 'absolute', 
      top: '50%', 
      left: '50%' 
     }; 

     return (
      <div style={{width: 'auto'}}> 
       <Image 
        style={background} responsive 
        src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg"> 
       </Image> 
       <h1 style={textStyle}>Text over image</h1> 
      </div> 
     ); 
    } 
}); 

は、サンプルのデモです：https://codesandbox.io/s/w1W8v3y8

はそれが役に立てば幸い！