在React.js中的Grid布局上覆盖组件

Question

我已经创建了一个网格模板以及一个React.js组件，其中包含网格大小的规范。网格组件出现在主页中，我想用我的组件覆盖一个网格框。任何人都可以帮助我吗？

Component.jsx

   import React from 'react';

class App extends React.Component {

componentWillMount() {
        const script = document.createElement("script");

        script.src = "json.js";
        script.async = true;

        document.body.appendChild(script);
    };


   render() {

   var wrap = {"width":"682px","height":"160.8 px","border":"thin solid white"}

   var tile1 = {"width":"320px","height":"583px","margin":"20px","border":"1px solid #EFEFF1", "position":"fixed", "borderWidth":"1px", "borderRight":"1px thin", "float":"left"}


   var button = {"backgroundColor":"#0471B2","display":"block","margin":"0 auto"}


      return (
      <div className="wrap">
          <div className="tile1" style={tile1}>
            <img id="img" style={{width: '320px', height: '160.8px'}} />
            <p id="benefits" />
            <input type="button" style={button} defaultValue="JSON from REST API" />
            </div>

          </div>
      );
   }
}

export default App;

Grid.js

import React, { Component } from 'react';
import GridStyle from '../styles/grid.css';

const BenefitTile = React.createClass({
  render: function() {
    return <div>{this.props.data.header}</div>;
  }
});

export default class Grid extends Component {
      render() {
        if (!this.props.tiles) {
            console.log("returning NULL from Grid");
            return null;
        }
        return (
            <div id="xxx-tile-grid" className="row">
              {this.props.tiles.map(function(tile) {
                console.log("tile is", tile);
                 return (
                    <div className="col-xs-12 col-sm-6 col-md-4" key={tile.id}>
                      <xxxTile key={tile.id} data={tile}/>
                    </div>
                 );
              })}
            </div>
        );
      };
}

Grid.defaultProps = {
  tiles: [{id: "1", header: "One"}, {id: "2", header: "Two"}]
};