时间戳

首页 > 解决方案 > 通过状态不工作通过 img src 更改图像

reactjs - 通过状态不工作通过 img src 更改图像

问题描述

我有一张我已导入为图像的默认值的图片：prop in state，它显示但当我尝试通过另一个组件中的组件更改值时它没有改变

这是一个网页组件的子组件

import React, { Component } from 'react';
import YellCubePlant from '../imgs/CPC Yellow Cube Planter.jpg'
import AubSkinnyPlant1 from '../imgs/CPC Aubergine SKINNY PILLAR Planter (P).jpg'
import AubSkinnyPlant2 from '../imgs/CPC Aubergine SKINNY PILLAR Planter.png'
import OliveSkinnyVase from '../imgs/CPC Olive Green SKINNY VASE Planter.png'

class Item extends Component {
    constructor(props) {
        super(props)

        this.state = {
            image : YellCubePlant,
        }

    }
  render() {
    return (

       <div className="item">
           Item Name
           <img src={this.state.image} alt="placeholder"></img>
       </div>

    );
  }
}

export default Item;

这是嵌套的父组件，我尝试更改状态图像值。正如所见<Item image={AubSkinnyPlant1}/>

import React, { Component } from 'react';
import Item from '../item';
import YellCubePlant from '../../imgs/CPC Yellow Cube Planter.jpg'
import AubSkinnyPlant1 from '../../imgs/CPC Aubergine SKINNY PILLAR Planter (P).jpg'
import AubSkinnyPlant2 from '../../imgs/CPC Aubergine SKINNY PILLAR Planter.png'
import OliveSkinnyVase from '../../imgs/CPC Olive Green SKINNY VASE Planter.png'

class Collection extends Component {
  render() {
    return (
     <div className="container-fluid"> 

       <h1>
         The Collection
       </h1>

       <div className="colltext">
          Our collection of products within the Landscape exhibition.
       </div>
       <div>

       </div>

       <Item image={AubSkinnyPlant1}/>
       <Item />
       <Item />
       <Item />
       <Item />
       <Item />
       <Item />
       <Item />

     </div>
    );
  }
}

export default Collection;

IT 只显示了我的 Item 组件中默认状态的图像，这是为什么呢？

标签： reactjsstate

解决方案

由于您使用来自组件的状态，因此在从父组件image提供道具时不会更改它。image

您可以只使用父组件提供的道具并YellCubePlant用作默认值。

class Item extends Component {
  render() {
    const { image = YellCubePlant } = this.props;

    return (
      <div className="item">
        Item Name
        <img src={image} alt="placeholder" />
      </div>
    );
  }
}

推荐阅读