Question

我正在尝试在React中建立一个照相馆。到目前为止，我有一个App组件和一个Photo组件。我的图像的详细信息位于“应用程序”组件状态下，我想将这些图像传递给“照片”组件。到目前为止，一切都很好。

但是，当我尝试使用图像道具为<img />标签分配适当的来源时，它不起作用。我正在通过<img src={ this.props.images.src } />进行此操作。当我将其记录到控制台时，该值是不确定的。

这是怎么回事？

应用程序组件的代码：

import React, { Component } from 'react';
import Photo from './components/Photo';
import images from './data/images';
import './App.css';
import './css/Photo.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      images: images,
      visible: false,
      modalClass: 'photo-modal-invisible'
    };
  }

  handleClick(index) {
    const isVisible = this.state.visible;

    if(isVisible === false) {
      this.setState({ visible: true, visibleClass: 'photo-modal-visible', activeImage: images[index] });
    } else {
      this.setState({ visible: false, visibleClass: 'photo-modal-invisible' });
    }
  }

  render() {
    return (
      <div className="App">
        <React.Fragment>
          <div className="photo-container">
            {
              this.state.images.map((image, index) =>
                <Photo
                  images={ this.state.images }
                  visible={ this.state.visible }
                  modalClass={ this.state.modalClass }
                />
              )
            }
          </div>
        </React.Fragment>
      </div>
    );
  }
}

export default App;

“照片”组件的代码：

import React, { Component } from 'react';
import './../css/Photo.css';

class Photo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <a href="#"><img src={ this.props.images.src } /></a>
    );
  }
}

export default Photo;

图像数据：

export default [{
  title: 'Mountain Road',
  photographer: 'Emma Ayers',
  alt: 'Mountain Road',
  src: '/assets/images/image1.png'
}, {
  title: 'Fall Forest',
  photographer: 'Emma Ayers',
  alt: 'Fall Forest',
  src: '/assets/images/image2.png'
}, {
  title: 'Flower Bridge',
  photographer: 'Emma Ayers',
  alt: 'Flower Bridge',
  src: '/assets/images/image3.png'
}, {
  title: 'Dry River',
  photographer: 'Emma Ayers',
  alt: 'Dry River',
  src: '/assets/images/image4.png'
}, {
  title: 'Moony Mountains',
  photographer: 'Emma Ayers',
  alt: 'Moony Mountains',
  src: '/assets/images/image5.png'
}, {
  title: 'Snowy Mountains',
  photographer: 'Emma Ayers',
  alt: 'Snowy Mountains',
  src: '/assets/images/image6.png'
}
];

Answer 1

您应该只将一张图像传递给照片组件

<React.Fragment>
      <div className="photo-container">
        {
          this.state.images.map((image, index) =>
            <Photo
              image={ image }
              visible={ this.state.visible }
              modalClass={ this.state.modalClass }
            />
          )
        }
      </div>
    </React.Fragment>

您无需将照片作为有状态组件。无状态功能组件足以显示仅视图。

const Photo (props) => (
      <a href="#"><img src={ props.image.src } /></a>
    );
  }
}

export default Photo;

Answer 2

问题出在您的map方法内，您正在传递试图映射的整个数组（this.state.images）。您可以将map视为功能性的for循环，因此对于循环的每个图像，您都返回一个<Photo />，并且该循环的每个实例都是您在图像数据文件中定义的对象之一

this.state.images.map((image, index) => (
    <Photo
     image={image} // the fix
     visible={this.state.visible}
     modalClass={this.state.modalClass}
   />
)

，然后在您的Photo组件中

<a href="#"><img src={this.props.image.src} /></a>

Answer 3

应用程序组件：

import React, { Component } from 'react';
import Photo from './components/Photo';
import images from './data/images';
import './App.css';
import './css/Photo.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: images,
      visible: false,
      modalClass: 'photo-modal-invisible'
    };
  }

  handleClick = (index) => {
    const isVisible = this.state.visible;
    if(isVisible === false) {
      this.setState({ visible: true, visibleClass: 'photo-modal-visible', activeImage: images[index] });
    } else {
      this.setState({ visible: false, visibleClass: 'photo-modal-invisible' });
    }
  }

  render() {
    return (
      <div className="App">
        <React.Fragment>
          <div className="photo-container">
            {
              this.state.images.map((image, index) =>
                <Photo
                  images={image}
                  visible={this.state.visible}
                  modalClass={this.state.modalClass}
                  onClick={(index) => this.handleClick(index)}
                />
              )
            }
          </div>
        </React.Fragment>
      </div>
    );
  }
}

export default App;

照片组件：

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

class Photo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <a href="#"><img src={ this.props.images.src alt={this.props.images.alt}} /></a>
    );
  }
}

export default Photo;

这里的问题是图像映射函数。在传递映射函数参数时，您正在此处传递图像数组的直接状态。因此，map可以与图像数组对象循环使用。

这里有活动的图像，请分享用例，以便我给您更好的处理方法。

作为道具访问图像源

3 个答案: