开发者问题收集

React:将图像从父组件中的this.state传递到子组件

2020-01-02
373

我有一个已导入到 React 类组件的图像,如下所示:

import Hat3 from './assets/hat3/hat3.png';

要在此组件中显示此图像,我可以执行以下操作:

<img src={hat3} />

我有一个名为 FeaturedItem 的子组件,如下所示:

<FeaturedItem hat={this.state.hat3}/>

我想通过 prop hathat3 图像传递给 FeaturedItem 组件。我该如何将 hat3 图像存储在状态中,以便我可以将其传递给功能性 FeaturedItem 组件?

我尝试了以下操作:

constructor(props) {
        super(props);

        this.state = {
           // Doesn't work
           hat3: {hat3}
           // Doesn't work
           hat3: ${hat3}
           // Doesn't work
           hat3: `${hat3}`
        };
    }

将此图像存储在状态中的正确方法是什么,以便我可以通过 props 将其传递给子组件并将其显示在子组件中?

1个回答

尝试以下代码

this.state = {
    hat3: Hat3
};

如果此方法无效,请分享您遇到的错误。

Nikhil Goyal
2020-01-02