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

希望它能帮助！