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

Posted 2023-02-23

【中文标题】如何从 React JS 中父组件上的对象循环子组件中的项目

【英文标题】：How to loop items in child component from an object on the parent component in React JS

【发布时间】：2018-12-10 07:03:34

【问题描述】：

我有一个显示项目项的视图。项目信息位于 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 代码位于项目（子）组件中，如下所示。

子组件：

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

我需要使用子组件将每个元素显示为数据对象中的一个项目。

【问题讨论】：

在Project 组件上，将对象作为道具传递并尝试

【参考方案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，

祝你有美好的一天

【讨论】：

您已将 this.state.data 传递给子节点并在子节点中循环数据。在上面的示例中，@karaxuna 在父元素中有循环并将数据传递给子元素。你认为最好的方法是什么？

reactjs.org/docs/lists-and-keys.html 这是官方文档，用于反应检查他们过去如何映射列表:) 当你有很多组件要使用时，尽量保持父组件清洁谢谢

【参考方案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
        ...
    
;

【讨论】：

这对我有用。感谢@karaxuna this.props.project.img、this.props.project.name、this.props.project.desc

导入'./projects.css';这已经导入到父级为什么需要在子级中导入？

@Sazib 有两个文件 projects.css & project.css 子元素有自己的样式

在下面的解决方案中，@Sazib 已将 this.state.data 传递给孩子并在孩子中循环数据。在这里，您在父元素中有循环并将数据传递给子元素。你认为最好的方法是什么？