Как поместить компонент как ссылку на изображение, а не объект в React? - PullRequest
Новая
       36

Как поместить компонент как ссылку на изображение, а не объект в React?

0 голосов
/ 13 февраля 2020

У меня есть три компонента. В компоненте Home есть "imgSr c:" ... Я хочу поместить туда "ссылку" из компонента HomeImage2. Но я получаю src = "object Object". Более того, у меня есть третий компонент с реквизитом MyConteiner. Как это решить?

Компонент Home. js

class Home extends Component {
  render() {
    return (
      <div className="home-page">
        <MyConteiner
          style={{background:"#719ea9"}}
          content={{header: "Explorer", button:"Apply now", imgSrc:(<HomeImage2 />), parag: "We're here"}}
        />
      </div>
    )
  }
}
export default Home;

Компонент MyConteiner. js

function MyConteiner (props){

    return(
        <div className="main-content" style={{paddingLeft:5}} {...props}>
            <div className="contecnt-left">
                <h1>{props.content.header}</h1>
                <button><a href="https://google.com/">{props.content.button}</a></button>
            </div>
            <div className="contecnt-right">
                <img src={props.content.imgSrc} className="rounded float-right" alt="airplane" />
                <p>{props.content.parag}</p>
            </div>
        </div>
    ); 

}

export default MyConteiner;

Компонент HomeImage2. js

const HomeImage2 = () => {
    return (
        <StaticQuery
        query= {graphql`
        {
            contentfulHomePage {
              homeImage {
                file {
                  url
                }
                title
              }
            }
          }`}
    render={data => (
        <div>
            <img src={data.contentfulHomePage.homeImage.file.url} alt={data.contentfulHomePage.homeImage.title}/>
        </div>
    )}
    />
    )   
}


export default HomeImage2
...