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

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

父级：

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，

祝你今天愉快