如何在反應中顯示文本數組？

Question

我正在 ReactJS 中創建一個投資組合網站。我正在嘗試在 HomePageContent.js 中的 desc 下顯示一組文本。 我不確定如何顯示每個段落。 我想我必須 map 段落，但我不知道該怎么做。

相關代碼

首頁內容.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;

作業.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;

Answer 1

你是對的，映射段落是可行的，但我建議將desc內的值更改為數組，這樣你就可以更輕松地完成這項工作。

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

然后，在你的 JSX 中，你可以 map 覆蓋它並將它們中的每一個放在它們自己的一組<p>標簽中。

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

這是有效的，因為 map function 返回一個數組，其中包含您在提供的粗箭頭 function 中返回的任何內容，並且 JSX 將自動依次渲染一組 JSX 元素。 所以它在渲染的 HTML 中看起來像這樣：

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