Как отобразить как props img у компонента?

93
09 апреля 2021, 00:00

Один компонент должен использоваться несколько раз, но меняется текст и картинка для него. С текстом-пропсами я разобрался, но проблема в том что я не могу тоже самое сделать с img.

Проблема пишет что в самой функции-компоненте. Сам компонент:

function NewSubProject(props) {
    const { ProjectView } = this.props;
    return (
        <div className="gallery-image">
            <div className="img-box">
                <img src = { props.ProjectView } />
                <div className="transparent-box">
                    <div className="caption">
                        <p> { props.ProjectName } </p>
                        <p className="opacity-low"> { props.ProjectDesc } </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

Вызов компонента:

<NewSubProject  ProjectView = {'http://via.placeholder.com/350x150'}
                ProjectName = "asd"
                ProjectDesc = "123" />

И мне надо вытянуть картинку не с сайта, а с папки, что находится в src. Буду благодарен за помощь!!!

Answer 1

Первая проблема в том что вы с начало деструктуризируете значение из пропсов потом не используете его.

Вторая проблема в том что в функции для извлечение свойства из пропсов не надо использовать this потому и все ломается const { ProjectView } = this.props; так не надо делать!

Вот рабочий Codesandbox

import React from "react";
function NewSubProject(props) {
  const { ProjectView, ProjectName, ProjectDesc } = props;
  return (
    <div className="gallery-image">
      <div className="img-box">
        <img src={ProjectView} />
        <div className="transparent-box">
          <div className="caption">
            <p> {ProjectName} </p>
            <p className="opacity-low"> {ProjectDesc} </p>
          </div>
        </div>
      </div>
    </div>
  );
}
export default NewSubProject;

И используйте компонент NewSubProject где хотите 

<NewSubProject
    ProjectView={"http://via.placeholder.com/350x150"}
    ProjectName="asd"
    ProjectDesc="123"
  />