リアクションなしの画像 - 画面に画像が表示されない

Question

Aフレームを使用して自分のコードにパノラマ機能を実装しようとしています。

これは反応するコードです。私のコードでは、loadOne関数が呼び出された後、私はちょうど呼び出すと、1つの画像だけが画面に表示されます

しかし、<a-scene>で何も画面に来ていません。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import 'aframe'; 
import 'aframe-particle-system-component'; 
import {Entity, Scene} from 'aframe-react'; 

class App extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     images:[], 
     pano:'', 
     name:'', 
     list:[], 
     isClicked:false, 
     imageUrl:'' 
    } 
    this.loadImages=this.loadImages.bind(this); 
    this.loadOne=this.loadOne.bind(this); 
    } 


    loadImages(){ 
    console.log("load"); 
    var that=this; 
    $.ajax({ 
     type:'GET', 
     url:'https://demo0813639.mockable.io/getPanos', 
     success:function(result){ 
     var images=that.state.images; 
     for(var i=0;i<result.length;i++){ 
      that.state.images.push({"pano":result[i].pano,"name":result[i].name}); 
     } 
     that.setState({ 
      images:images 
     }) 
    } 

}) 

} 

loadOne(pano){ 
    this.setState({ 
    isClicked:true, 
    imageUrl:pano 
    }) 
} 


    render(){ 
    //let content=<p></p>; 
    var list=this.state.list; 
    if(this.state.isClicked===false){ 
     list=this.state.images.map((result)=>{ 
     //console.log(result.name); 
     return(<div className="box"> 
       <div className="label">{result.name}</div> 
       <img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/> 
      </div> 
      ) 
    }) 
    }else{ 
     return(
      <Scene> 
      <Entity position="0 -2 0" rotation="-90 0 0"><img src={this.state.imageUrl}/></Entity> 
      </Scene> 
    ) 
    } 
    return( 
     <div> 
     <button onClick={this.loadImages}>Click</button> 
     <div >{list}</div>  
     </div> 
     ); 
    } 
} 

ウェブパックも変更する必要がありますか？

var webpack = require('webpack'); 
var path = require('path'); 

var node_dir = __dirname + '/node_modules', 
    lib_dir = __dirname + '/public/libraries'; 

var config = { 
    // The resolve.alias object takes require expressions 
    // (require('react')) as keys and filepath to actual 
    // module as values 
    resolve: { 
     alias: { 
      react: lib_dir + '/react', 
      "react-dom": lib_dir + '/react-dom', 
      "jquery": lib_dir + '/jquery-3.2.1.js', 
      react:preact 
     }, 
     extensions:['.js','.jsx','.json'] 
    }, 
    plugins: [ 

     new webpack.optimize.CommonsChunkPlugin({ // 
      name: 'vendors', 
      filename: 'build/vendors.bundle.js', 
      minChunks: 2, 
     }), 

     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ], 

    entry: { 
     musicApp: ['./public/js/app.js', 'webpack/hot/only-dev-server'], 
     vendors: ['react', 'react-dom', 'jquery', 'webpack/hot/only-dev-server'] 
    }, 

    output: { 
     path: path.join(__dirname, "public"), 
     filename: 'build/[name].bundle.js', 
     libraryTarget: "umd" 
    }, 

    module: { 

     noParse: [ 
      new RegExp(lib_dir + './react.js'), 
      new RegExp(lib_dir + './react-dom.js') 
     ], 
     rules: [ 
      { 
       test: /\.js?$/, 

       loaders: ['react-hot-loader/webpack', 'babel-loader'], 
       include: path.join(__dirname, 'public') 

      }, 
      { 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015'] 
       }, 
       include: path.join(__dirname, 'public') 
      } 
     ] 
    } 
} 

module.exports = config; 

私はAフレームのライブラリも含めました。では、ここで何が間違っていますか？ 私はこの

​​

Answer 1

のようなエラーが発生しますこれは、フレームが箱から出してリアクトでは動作しないことを理解することが重要です。

JSXに<a-scene>のようなタグを含めると、Reactはそれが既存のコンポーネントと一致すると予想します。これは、JSXのすべてのタグがコンポーネント（<img />などのビルトインタグまたはカスタムタグ）にマップされるためです。

だから何をする必要がありますすることはaframe-react