Question

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

这是网页组件的子组件

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;

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

Answer 1

由于您从组件状态使用了image，因此从父组件获得image道具时，它不会被更改。

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

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

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

Answer 2

在这里，您没有正确更新image组件的状态Item，因为您正在用一些图像进行初始化，因此它只会显示该图像

但是您想从道具渲染图像，因此，我认为您应该将Item组件转换为如下所示的功能组件，

1使用功能组件。

// default image ( YellCubePlant )
export default function ({ src = YellCubePlant, ...props }) {
  return (
    <div {...props}>
      <img src={src} />
    </div>
  )
}

或

您可以通过使用以下道具更新状态来做到这一点，

使用生命周期方法的2个组件

export default class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      src: YellCubePlant // default image.
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.src !== nextProps.src) {
      return ({ src: nextProps.src })
    }

    return null
  }


  render() {
    return (
      <div>
        <img src={this.state.src} />
      </div>
    )
  }
}

注意：如果您只是渲染src，或者如果您使用生命周期方法进行某些操作，则我建议使用第一种方法，那么第二种方法会更有用，这是您的选择。

好运

通过状态不通过传递img src更改图像

2 个答案: