Javascript 如何在React and convert to component中使用数组

我已经创建了一个网页，它汇集了我生成的SQL数据库中的信息，比如一个人的姓名、地址和工作。我通过创建一个数组并将数据放入其中，然后返回，找到了如何在网页上显示这些内容的方法。我想做的是创建一个react组件，它看起来像一个tile/nametag，是一个包含每个人/工作的框，并为每个条目创建它。我对如何创建react组件并使用CSS对其进行样式设置感到困惑

这是我的网页代码：

    import React, { Component } from "react";

export class Dashboard extends Component {
    displanyName = Dashboard.name;

    constructor(props) {
        super(props);

        this.state = {
            people: []
        };
    }

    componentDidMount() {
        fetch("api/people")
            .then(response => response.json())
            .then(data => this.setState({ people: data }));
    }
    render() {
        //const { people } = this.state; // equivalent to next line
        const people = this.state.people;
        if (people.length > 0)

        //creates an array to iterate
        let arr = people.map((person, index) => <div key={index}>Person: {person.name} , Job: {person.job}</div>);

        return (
            <div>
                {arr}
            </div>
        );
    }
}

import React，{Component}来自“React”；
导出类仪表板扩展组件{
displanyName=Dashboard.name；
建造师（道具）{
超级（道具）；
此.state={
人：[]
};
}
componentDidMount（）{
获取（“api/人”）
.then（response=>response.json（））
.then（data=>this.setState（{people:data}））；
}
render（）{
//const{people}=this.state；//相当于下一行
const people=this.state.people；
如果（people.length>0）
//创建要迭代的数组
设arr=people.map（（person，index）=>person:{person.name}，Job:{person.Job}）；
返回(
{arr}
);
}
}

它在页面上显示数组的内容，如下所示： 人员：鲍勃·博伯特，工作：程序员 人：简·多伊，工作：教师

---

人：约翰·史密斯，工作：厨师

如果我理解正确，你可以试试这个

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

export class PersonNameJob extends Component {
  render() {
    return (
      <div style={{ fontWeight: 'bold' }}>Person: {this.props.person.name}, Job: {this.props.person.job}</div>
    );
  }
}

export class Dashboard extends Component {
  // more code here...
  render() {
    const people = [
      {
        name: 'John',
        job: 'Developer',
      },
      {
        name: 'Marry',
        job: 'accountant',
      },
    ];

    return (
      <div>
        {people.map((person, index) => (<PersonNameJob key={index} person={person} />))}
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <Dashboard />
  </React.StrictMode>,
  document.getElementById('root')
);

从“react dom”导入ReactDOM；
从“React”导入React，{Component}；
导出类PersonNameJob扩展组件{
render（）{
返回(
人员：{this.props.Person.name}，作业：{this.props.Person.Job}
);
}
}
导出类仪表板扩展组件{
//更多代码在这里。。。
render（）{
康斯特人=[
{
姓名：'约翰'，
职务：“开发人员”，
},
{
姓名：'结婚'，
工作：“会计”，
},
];
返回(
{people.map（（person，index）=>（））}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

可以通过使用组件或使用包的样式属性直接设置样式

导出类仪表板扩展组件{
render（）{
//用逻辑来吸引人
返回(
{people.map（（person，index）=>（））}
);
}
}
const StyledPersonNameJob=styled（PersonNameJob）`
背景色：红色；
边框：1px实心#000；
`;

您考虑过使用吗？我喜欢使用材质UI来处理类似的事情。可以使用该工具轻松制作您所需的内容。要使用物料界面，您需要使用

npm install@material UI/core

或

纱线添加@material UI/core

进行安装。然后可以使用组件中的组件。它看起来像这样：

import React, { Component } from "react";
// import material UI card components
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
// useful component for displaying text - multiple variants (body, h1, h2 etc.)
import Typography from '@material-ui/core/Typography';

export class Dashboard extends Component {
    displanyName = Dashboard.name;

    constructor(props) {
        super(props);

        this.state = {
            people: []
        };
    }

    componentDidMount() {
        fetch("api/people")
            .then(response => response.json())
            .then(data => this.setState({ people: data }));
    }
    render() {
        //const { people } = this.state; // equivalent to next line
        const people = this.state.people;
        if (people.length > 0)

        //creates an array to iterate
        let arr = people.map((person, index) => (
            <Card key={index}>
                <CardContent>
                    <Typography variant="h5">
                        Person: {person.name}
                    </Typography>
                    <Typography variant="body2"> 
                        Job: {person.job}
                    </Typography>
                </CardContent>
            </Card>
        ));

        return (
            <div>
                {arr}
            </div>
        );
    }
}

import React，{Component}来自“React”；
//导入物料UI卡组件
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
//用于显示文本的有用组件-多个变体（主体、h1、h2等）
从“@material ui/core/Typography”导入排版；
导出类仪表板扩展组件{
displanyName=Dashboard.name；
建造师（道具）{
超级（道具）；
此.state={
人：[]
};
}
componentDidMount（）{
获取（“api/人”）
.then（response=>response.json（））
.then（data=>this.setState（{people:data}））；
}
render（）{
//const{people}=this.state；//相当于下一行
const people=this.state.people；
如果（people.length>0）
//创建要迭代的数组
让arr=people.map（（person，index）=>(
个人：{Person.name}
作业：{person.Job}
));
返回(
{arr}
);
}
}

---

Material UI有很好的文档（链接在上面）和完整的代码示例，所以您可以确切地看到如何使用所有东西，以及如何将其应用到您的组件中。如果像我一样，您在组件的UI外观方面有点困难，我建议您使用它。

此方法是将此代码放在与dashboard相同的文件中，还是将其放在PersonNameJob.js和PersonNameJob.css等单独的文件中？如果PersonName组件很小，您可以将其放在与dashboard相同的文件中。否则，您应该为每个文件定义一个组件。应该在组件中定义CSS。还有一件事，您应该考虑使用功能组件而不是类组件。因为React钩子可能具有更好的性能，但它们仅为功能组件设计。我厌倦了把这部分放在我已经写过的“import-React，{Component}上面，而不是“React”；导出类PersonNameJob扩展组件{render（）{return（Person:{this.props.Person.name}，Job:{this.props.Person.Job}）；}}}``但是现在我收到这个错误“第7:23行：'index'未定义无未定义”

import React, { Component } from "react";
// import material UI card components
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
// useful component for displaying text - multiple variants (body, h1, h2 etc.)
import Typography from '@material-ui/core/Typography';

export class Dashboard extends Component {
    displanyName = Dashboard.name;

    constructor(props) {
        super(props);

        this.state = {
            people: []
        };
    }

    componentDidMount() {
        fetch("api/people")
            .then(response => response.json())
            .then(data => this.setState({ people: data }));
    }
    render() {
        //const { people } = this.state; // equivalent to next line
        const people = this.state.people;
        if (people.length > 0)

        //creates an array to iterate
        let arr = people.map((person, index) => (
            <Card key={index}>
                <CardContent>
                    <Typography variant="h5">
                        Person: {person.name}
                    </Typography>
                    <Typography variant="body2"> 
                        Job: {person.job}
                    </Typography>
                </CardContent>
            </Card>
        ));

        return (
            <div>
                {arr}
            </div>
        );
    }
}