React.Js Hintergrundbild korrekt angezeigt mit Worten über die Spitze

Question

Ich versuche im Grunde, diese Website als eine Lektion zu kopieren, um mich selbst Reagieren beizubringen.

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

Könnte mir jemand helfen, ein Bild als Hintergrund zu verwenden und den Text platzieren darüber, auch, wie es auf gleiche Höhe mit der Höhe auf der Seite angezeigt machen?

Hier ist meine aktuellen Code

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> 
     ); 
    } 
}); 

schätzen die Hilfe!

Answer 1

Das Problem, mit dem Sie konfrontiert sind, ist, dass Image Komponente ein ungültiges Element-Tag ist und keine Kinder oder eine dangerouslySetInnerHTML-Funktion erhalten kann.

Sie müssen CSS verwenden und einen Text (oder div) Element außerhalb des Image Komponente, wie folgt aus:

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> 
     ); 
    } 
}); 

Hier ist ein Beispiel-Demo: https://codesandbox.io/s/w1W8v3y8

Hoffe, es hilft!