Как зациклить элементы в дочернем компоненте из объекта родительского компонента в React JS

Question

У меня есть вид, который показывает элементы проекта. Информация о проекте находится в объекте данных в компоненте Projects (родительский).

Родительский компонент:

import React from 'react';
import './projects.css';
import { Project } from '../projects/project/Project';

export class Projects extends React.Component {
    constructor(props) {
        super(props);

        var projects = [
            {
                name: "Project 01",
                desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.",
                img: "http://wenuka.com/img/back.jpg"
            },
            {
                name: "Project 02",
                desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea.",
                img: "http://wenuka.com/img/back.jpg"
            },
            {
                name: "Project 03",
                desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing one or more sentences.",
                img: "http://wenuka.com/img/back.jpg"
            }
        ]
    }

    render() {
        return (
            <section className="projects bg-ash">
                <Project/>
            </section>
        );
    }
};

HTML-код элемента проекта находится в компоненте Project (дочерний), как показано ниже.

Дочерний компонент:

import React from 'react';
import './project.css';

export class Project extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="container work-item">
                <div className="row">
                    <div className="col-lg-5">
                        <img src="http://wingman.mediumra.re/assets/img/graphic-product-paydar.jpg"/>
                    </div>
                    <div className="col-lg-5 image-box">
                        <h5>Project Name</h5>
                        <p>To write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.</p>
                    </div>
                </div>
            </div>
        );
    }
};

Мне нужно показать каждый элемент как проект в объекте данных с использованием дочернего компонента.

Answer 1

Вы должны передать свои родительские данные в качестве реквизита

Допустим, ваш родительский класс:

import React from 'react';
import './projects.css';
import { Project } from '../projects/project/Project';

export class Projects extends React.Component {
constructor(props) {
    super(props);
    // use this.state to initiate your state, keep data in state you can use variable not recommended
    this.state = {
    data : [
        {
            name: "Project 01",
            desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.",
            img: "http://wenuka.com/img/back.jpg"
        },
        {
            name: "Project 02",
            desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea.",
            img: "http://wenuka.com/img/back.jpg"
        },
        {
            name: "Project 03",
            desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing one or more sentences.",
            img: "http://wenuka.com/img/back.jpg"
        }
    ]
  }
}

render() {
    return (
        <section className="projects bg-ash">
            <Project data={this.state.data}/>
        </section>
    );
}
};

и ваш дочерний компонент должен быть:

import React from 'react';
import './project.css';

export class Project extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div>
       {this.props.data.map((item,i)=>
        <div className="container work-item" key={i}>
            <div className="row">
                <div className="col-lg-5">
                    <img src={item.img}/>
                </div>
                <div className="col-lg-5 image-box">
                    <h5>{item.name}</h5>
                    <p>{item.desc}</p>
                </div>
            </div>
        </div>
    );
}
};

Смотрите демо-версию здесь: https://codesandbox.io/s/mqj6j0o2y9,

Хорошего дня

Answer 2

Родитель:

import React from 'react';
import './projects.css';
import { Project } from '../projects/project/Project';

export class Projects extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            projects: [
            {
                name: "Project 01",
                desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.",
                img: "http://wenuka.com/img/back.jpg"
            },
            {
                name: "Project 02",
                desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea.",
                img: "http://wenuka.com/img/back.jpg"
            },
            {
                name: "Project 03",
                desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing one or more sentences.",
                img: "http://wenuka.com/img/back.jpg"
            }
        ]
        };
    }

    render() {
        return (
            <section className="projects bg-ash">
                {this.state.projects.map(project => (
                    <Project key={project.name} project={project}/>
                ))}
            </section>
        );
    }
};

Ребенок:

import React from 'react';
import './project.css';

export class Project extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let project = this.props.project; // Use this in jsx
        ...
    }
};