オンライン例（キューブのCSS）内部

私が反応し使用して作っていたウェブページの中、このキューブを再現しようとしていますが（私が反応するのは非常に新しいですので、この質問は愚かなことかもしれません）リアクトオンライン例（キューブのCSS）内部

したがって、キューブのHTML構造を含むコンポーネントを作成しました。

その後

class Cube extends Component { 
    render() { 
    return (
     <div className="cube"> 
     <div id="wrapper"> 
    <div class="viewport"> 
    <div class="cube"> 
     <div class="side"> 
     <div class="cube-image">1</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">2</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">3</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">4</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image">5</div> 
     </div> 
     <div class="side"> 
     <div class="cube-image active">6</div> 
     </div> 
    </div> 
    </div> 
</div> 
     </div> 
    ); 
    } 
}

、私は単にのようなので、私は、インポート別のファイルに上記のウェブサイトからCSSを追加しました：

import './ProductPage.css';

を（CSSの上記のリンクを参照してくださいCSSを貼り付けるだけで、コピーされます。）。

最後に、私はそれ自体がレンダリングされたキューブをレンダリングする必要があります別のコンポーネントを、作成した：

class NewProductPage extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     img: null, 
    }; 
    this.onDrop = this.onDrop.bind(this); 
    } 
    onDrop(acceptedFiles){ 
    this.setState({ 
     img: acceptedFiles[0].preview, 
    }) 
    } 
    render(){ 
    return (
     <div> 
     <Cube /> 
     <div className="DropPicBox"> 
      <DropZone onDrop={this.onDrop}> 
      {this.state.img ? 
       <div> 
       <img className="PicBox" src={this.state.img} /> 
       </div> 
       : null} 
      </DropZone> 
     </div> 
     </div> 
    ); 
    } 
}

これは、レンダリングされたが、間違っている：