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組件是無效元素標記，無法接收子項或危險的SetInnerHTML函數。

您將需要使用CSS和文本（或DIV）元素Image組件之外，像下面這樣：

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

希望它能幫助！