如何在react中显示文本数组?

Daniel Zhang

我正在ReactJS中建立一个投资组合网站。我正在尝试在HomePageContent.js中的desc下显示文本数组。我不确定如何显示每个段落。我认为我必须映射这些段落,但是我不确定该怎么做。

相关代码

HomePageContent.js

// Image import statements
import Im1 from '../img/Im1.png';
import Im2 from '../img/Im2.jpg';
import Im3 from '../img/Im3.jpg';

let HomePageContent = {
  job: [{
    logo: Im1,
    alt: 'Logo1',
    companyName: 'comp1' ,
    link: 'link1',
    title: 't1',
    duration: 'dur1',
    location: 'loc1',
    desc: {
      text: 'p1',
      text: 'p2',
      text: 'p3',
      text: 'p4'
    },
    id: 1
  }

export default HomePageContent;

Job.js

import React from 'react';

import '../css/Experience.css';

function Job(props) {
  console.log(props.name);
  const jobList = props.job.map(j =>
    <div className='exp-container'>
      <img src={j.logo} alt={j.alt} />
      <div className='description'>
        <div>
          <a href={j.link} rel='noopener noreferrer' target='_blank'>
            {j.companyName}
          </a>
        </div>
        <div>{j.title}</div>
        <div>{j.duration}</div>
        <div>{j.location}</div>
        <div><p>{j.desc}</p></div>
      </div>
    </div>
  )

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

export default Job;
凯文·霍普斯

没错,可以在段落上进行映射,但是我建议将内部的值更改为desc数组,以便您更轻松地进行操作。

...
desc: [
      'p1',
      'p2',
      'p3',
      'p4',
    ],
...

然后,在您的JSX中,您可以在其上进行映射,并将它们放入各自的<p>标签集中

<div>
   {j.desc.map(paragraph => <p>{paragraph}</p>)}
</div>

之所以可行,是因为map函数返回的数组是您在提供的胖箭头函数中返回的所有内容,并且JSX会自动一个接一个地呈现JSX元素数组。因此,在呈现的HTML中看起来像这样:

<div>
   <p>p1</p>
   <p>p2</p>
   <p>p3</p>
   <p>p4</p>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在文本数组中强制使用空格?

来自分类Dev

如何在Python中替换文本数组中的单词?

来自分类Dev

如何使用SwiftUI顺序显示文本数组?

来自分类Dev

如何在React中显示数组的数组?

来自分类Dev

如何在SQLAlchemy中的文本数组列上创建GIN索引(使用PostgreSQL和python)

来自分类Dev

Java中的文本数组

来自分类Dev

如何在轮盘中插入图像而不是文本数据

来自分类Dev

如何在反应中访问标签之间的文本数据?

来自分类Dev

如何在文本数据中制作重复单词的矩阵

来自分类Dev

如何在图例中显示样本数量?

来自分类Dev

如何在图例中显示样本数量?

来自分类Dev

如何在样本数组中查找重复值

来自分类Dev

检查文本数组中的项目

来自分类Dev

如何在显示的文本中添加多个数组

来自分类Dev

如何在Java中的文本视图中显示数组

来自分类Dev

如何在 React 中的数组 onClick 中显示特定对象?

来自分类Dev

通过文本数组中的任何值来挑战在文本数组中搜索Postgres sql

来自分类Dev

Postgres:如何将文本数组列中的元素复制到 json 列中?

来自分类Dev

如何在React Native中按组显示数组值

来自分类Dev

我应该如何在IOS应用程序中存储我的静态文本数据

来自分类Dev

如何在Powershell中按时间戳对文本数据进行排序

来自分类Dev

如何在python程序本身中存储简单的文本数据?

来自分类Dev

如何在C中的两个HTML之间匹配文本数据

来自分类Dev

使用 Pythons lxml text() 参数时如何在文本数据中包含 URL

来自分类Dev

如何在excel中向文本数字添加数字(并计算)?

来自分类Dev

如何在文本数据中构建“数百万”检测器

来自分类Dev

如何在Swift中从内存播放[Int16]音频样本数组

来自分类Dev

postgres-聚合文本数组中的项目

来自分类Dev

PostgreSQL - 从文本数组中获取所有子组

Related 相关文章

  1. 1

    如何在文本数组中强制使用空格?

  2. 2

    如何在Python中替换文本数组中的单词?

  3. 3

    如何使用SwiftUI顺序显示文本数组?

  4. 4

    如何在React中显示数组的数组?

  5. 5

    如何在SQLAlchemy中的文本数组列上创建GIN索引(使用PostgreSQL和python)

  6. 6

    Java中的文本数组

  7. 7

    如何在轮盘中插入图像而不是文本数据

  8. 8

    如何在反应中访问标签之间的文本数据?

  9. 9

    如何在文本数据中制作重复单词的矩阵

  10. 10

    如何在图例中显示样本数量?

  11. 11

    如何在图例中显示样本数量?

  12. 12

    如何在样本数组中查找重复值

  13. 13

    检查文本数组中的项目

  14. 14

    如何在显示的文本中添加多个数组

  15. 15

    如何在Java中的文本视图中显示数组

  16. 16

    如何在 React 中的数组 onClick 中显示特定对象?

  17. 17

    通过文本数组中的任何值来挑战在文本数组中搜索Postgres sql

  18. 18

    Postgres:如何将文本数组列中的元素复制到 json 列中?

  19. 19

    如何在React Native中按组显示数组值

  20. 20

    我应该如何在IOS应用程序中存储我的静态文本数据

  21. 21

    如何在Powershell中按时间戳对文本数据进行排序

  22. 22

    如何在python程序本身中存储简单的文本数据?

  23. 23

    如何在C中的两个HTML之间匹配文本数据

  24. 24

    使用 Pythons lxml text() 参数时如何在文本数据中包含 URL

  25. 25

    如何在excel中向文本数字添加数字(并计算)?

  26. 26

    如何在文本数据中构建“数百万”检测器

  27. 27

    如何在Swift中从内存播放[Int16]音频样本数组

  28. 28

    postgres-聚合文本数组中的项目

  29. 29

    PostgreSQL - 从文本数组中获取所有子组

热门标签

归档