如何从 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 项目项的代码在项目（子）组件中，如下所示。

子组件：

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

Parent:

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

Child:

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

您需要将 parent 数据作为道具传递

假设您的 parent class 是：

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

你的 child 组件应该是：

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、

祝你有美好的一天

如何从 React JS 中父组件上的对象循环子组件中的项目

How to loop items in child component from an object on the parent component in React JS

javascript

components

reactjs

react-props

react-state-management