ReactJSのオブジェクトsrcをロードする際に問題が発生する

Question

私はまだこのフォーラムでReactとPostingを少し新しくしています。私は現在、お互いに話していると信じている2つのReactファイルを持っていますが、オブジェクトから情報を取得しようとすると切断されているようです。

import React, { Component } from 'react'; 
import './App.css'; 

export class App extends React.Component { 
    render() { 
    const src = this.props.src; 
    const alt = this.props.alt; 
    const width = this.props.width; 
    const height = this.props.height; 
    return (
     <div className="App"> 
     <header className="App-header"> 
      <h1 className="App-title">Will''s weird online shop thing I have no idea about</h1> 
     </header> 
     <p className="App-intro"> 
      Click the arrows to browse through the different items. 
     </p> 
     <img src={src} alt={alt} width={width} height={height} /> 
     </div> 
    ); 
    } 
} 

export default App; 

、他方は次のとおりです：私のリアクトファイルの1つがあり、私は私が正しく画像フォルダからdogbag.jpgとの直接リンクを持っている三つの画像をインポートしていることを確信してい

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import './index.css'; 
    import {App} from './App'; 
    import registerServiceWorker from './registerServiceWorker'; 
    import dogbag from './images/dogbag.jpg'; 

    const DogBagObj = { 
     src: dogbag, 
     alt: 'Cute dog handbag', 
     height: '100px', 
     width: '70px' 
    }; 

    const Items = [ 
     DogBagObj, 
     'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg', 
     'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg', 
     'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg' 
    ] 

    class OnlineStore extends React.Component { 
     constructor(props) { 
      super(props); 

      this.state = { currentItem: 0 }; 

      this.interval = null; 

      this.changeItem = this.changeItem.bind(this); 
     } 

     changeItem() { 
      let current = this.state.currentItem; 
      let next = ++current % Items.length; 
      this.setState({ currentItem: next }); 
     } 

     componentDidMount() { 
     this.interval = setInterval(this.changeItem, 1000); 
     } 

     render() { 
      const src = Items[this.state.currentItem]; 
      return <App src={src} />; 
     } 
    } 

    ReactDOM.render(
     <OnlineStore />, 
     document.getElementById('root')); 
    registerServiceWorker(); 

それらに正しくロードされます。
私の問題はDogBagObj.srcを正しく読み込むことにあると感じています。 Items配列のDogBagObjをdogbagに変更するとイメージがロードされますが、各イメージ（alt、height、widthなど）ごとに複数のタグを制御することもできます。私が探している文法的な文法的なエラーは少しありますか？これは問題を解決するのがずっと難しいでしょうか？あなたの時間をありがとう。

Answer 1

items配列には複数のデータ構造が含まれていますが、1つしか含まれていないかのように扱います。
文字列のみまたはオブジェクトのみを使用します。例えば
...のみ

文字列：

const Items = [ 
     DogBagObj.src, 
     'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg', 
     'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg', 
     'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg' 
    ] 

または類似のデータ構造を持つオブジェクトを使用します。

const Items = [ 
     DogBagObj, 
     {src:'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg'}, 
     {src:'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg'}, 
     {src:'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg'} 
    ] 

そして、あなたのrender方法で：

render() { 
    const src = Items[this.state.currentItem].src; 
    return <App src={src} />; 
}