在ReactJS中加载对象src时出现问题

我仍然有点新的反应和张贴在这个论坛上，所以请容忍我。我目前有两个React文件，我相信它们正在相互通信，但在试图从对象中提取信息时，似乎存在断开连接。我的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;

import React，{Component}来自'React'；
导入“/App.css”；
导出类应用程序扩展React.Component{
render（）{
const src=this.props.src；
const alt=this.props.alt；
const width=this.props.width；
const height=this.props.height；
返回(
威尔的网上商店很奇怪，我不知道

单击箭头浏览不同的项目。

);
}
}
导出默认应用程序；

另一个是：

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

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“/App”导入{App}；
从“./registerServiceWorker”导入registerServiceWorker；
从“./images/dogbag.jpg”导入dogbag；
常数DogBagObj={
src:dogbag，
alt:‘可爱的狗手提包’，
高度：“100px”，
宽度：“70px”
};
常数项=[
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'
]
类OnlineStore扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={currentItem:0}；
this.interval=null；
this.changeim=this.changeim.bind（this）；
}
changeItem（）{
让current=this.state.currentItem；
让next=+当前%Items.length；
this.setState（{currentItem:next}）；
}
componentDidMount（）{
this.interval=setInterval（this.changeItem，1000）；
}
render（）{
const src=Items[this.state.currentItem]；
返回；
}
}
ReactDOM.render(
, 
document.getElementById（'root'）；
registerServiceWorker（）；

我确信我已经从图像文件夹正确导入了dogbag.jpg，并且正确加载了与它们有直接链接的三幅图像。

---

我觉得我的问题在于如何正确读取DogBagObj.src。如果我将Items数组中的DogBagObj更改为dogbag，它将加载图像，但我还希望能够控制每个图像的多个标记（例如alt、height和width）。是否有一些小的语法错误，我正在寻找或这是一个问题，这将是更难补救？感谢您抽出时间。

您的

项

数组包含多个数据结构，但您将其视为仅包含一个。
仅使用字符串或仅使用对象。
例如

仅限字符串：

   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'}
    ]

或使用具有类似数据结构的对象：

   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() {
    const src = Items[this.state.currentItem].src;
    return <App src={src} />;
}

render（）{
const src=Items[this.state.currentItem].src；
返回；
}

非常感谢您，因为我相信您知道这解决了我的问题。