问如何在React中使用数组并转换为组件
EN

Stack Overflow用户

提问于 2020-07-17 01:50:24

回答 3查看 86关注 0票数 1

我已经创建了一个网页，它汇集了我生成的SQL数据库中的信息，比如一个人的姓名、地址和工作。我知道如何在网页上显示它，方法是创建一个数组并将数据放入其中，然后返回。我想要做的是创建一个react组件，它看起来像一个平铺/姓名标签，是一个包含每个人/工作的框，并为每个条目创建它。我对如何创建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>
        );
    }
}

在页面上显示数组的内容如下: Person: Bob Bobbert，Job: Programmer Person: Jane Doe，Job: Teacher Person: John Smith，Job: Chef

javascript

css

reactjs

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 3

Stack Overflow用户

发布于 2020-07-17 02:01:31

如果我没理解错的话，你可以试试这个。

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

您可以使用组件的样式属性或使用styled-components包直接设置样式。

export class Dashboard extends Component {
  render() {
    // logic to get people
    return (
      <div>
        {people.map((person, index) => (<StyledPersonNameJob key={index} person={person} />))}
      </div>
    );
  }
}
const StyledPersonNameJob = styled(PersonNameJob).`
    background-color: red;
    border: 1px solid #000;
`;

票数 1

Stack Overflow用户

发布于 2020-07-17 08:22:57

你有没有想过使用Material UI？我喜欢使用material UI来做这样的事情。Card Component可以很容易地制作出你想要的东西。要使用material UI，您需要使用npm install @material-ui/core或yarn add @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>
        );
    }
}