反应:将图像从父组件中的this.state传递给子组件

时间:2020-01-02 20:19:25

标签: javascript reactjs image components react-props

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

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

要在此组件中显示此图像,我可以做:

<img src={hat3} />

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

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

我想通过道具hat3hat图像传递给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 个答案:

答案 0 :(得分:2)

尝试下面的代码

this.state = {
    hat3: Hat3
};

如果这不起作用,请您分享遇到的错误。