Передача непостоянного значения (URL изображения) между компонентами в ReactJS - PullRequest
Новая
       34

Передача непостоянного значения (URL изображения) между компонентами в ReactJS

0 голосов
/ 16 апреля 2020

У меня есть два класса компонентов ( component1 , component2 ), расширяющих Component. В component1 у меня есть изображение с URL-адресом, который мне нужно передать источнику изображения component2. Я импортировал component2 в component1 по

Примечание. Это упрощенные версии моих файлов, и передача неконстантной переменной важна для моего варианта использования

Component1. js

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

    let imageUrl = 'https://someimage-link.com/test.png'

    class Component1 extends Component{

    render(){ 
       return <div>
                <component2 image={imageUrl}/>
              </div>
    }
    export default component1;

Component2. js

    import React, {Component} from 'react';

    class Component2 extends Component{

    render(){        
      return <div>
               <img src={this.props.image} alt=""/>
             </div>
    }
    export default component2;

In component2 Я попытался получить доступ к imageUrl с помощью, 

    <img src={this.props.image}/>

По 

    console.log({this.props.image});

в component2 Я вижу URL-адрес изображения который передается component1 , но тег img не может извлечь / отобразить его на странице. Есть ли какая-либо другая возможность или я что-то пропускаю для передачи значений между компонентами?

...