如何從React JS中父組件上的對象循環子組件中的項目

Question

我有一個顯示項目項的視圖。 項目信息位於項目（父級）組件的數據對象中。

父組件：

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);

        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
        ...
    }
};

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);
    // 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 ，

祝你有美好的一天