我如何映射物件中的字串，其中空字串被視為空行并且每個字串僅限于一行-有解無憂

{
"ptr0": [
    "Interviewer: Nancy Carolyn Camp Foster (NF)",
    "",
    "Interviewee: Edith Mills (EM)",
    "",
    "NF: Well it's kind of interesting to observe how students have turned out who've",
    "gone through Bristow schools. We lose track, we don't really realize and",
    "",
    "Other Persons: Lucy Mae Mills (LM) Unknown Woman (WS)"
        ]
}

我試圖在瀏覽器中的 jsx 中映射上面的 objecttrans 物件 ptr0，我希望物件中的空字串被視為空行，并且物件中的每個字串都被限制為一行，像這樣我試圖在瀏覽器 jsx 中顯示：

采訪者：Nancy Carolyn Camp Foster (NF)

受訪者：伊迪絲米爾斯（EM）

NF：嗯，觀察學生是如何
從布里斯托學校畢業的，這很有趣。我們迷失了方向，我們并沒有真正意識到

其他人：Lucy Mae Mills (LM) Unknown Woman (WS)

我在其中呼叫 Transcript 組件的組件

<Transcript
                transcript={objecttrans.ptr0.map(pt=>{          
                return   pt               
        })}
        />

成績單組件

return (
    <>
      <div className="content">
           <p>{props.transcript}</p>
      </div>
    </>
  );

uj5u.com熱心網友回復：

您的代碼似乎正在做您想要它做的事情。如果您的問題是未顯示新行，則可以br在字串為空時回傳一個元素。就像是：

objecttrans.ptr0.map(pt => pt || <br />

const Transcript = props => <div className="content">
  <p>{props.transcript}</p>
</div>;


const objecttrans = {
  "ptr0": [
    "Interviewer: Nancy Carolyn Camp Foster (NF)",
    "",
    "Interviewee: Edith Mills (EM)",
    "",
    "NF: Well it's kind of interesting to observe how students have turned out who've",
    "gone through Bristow schools. We lose track, we don't really realize and",
    "",
    "Other Persons: Lucy Mae Mills (LM) Unknown Woman (WS)"
  ]
};

ReactDOM.render(
  <Transcript
    transcript={objecttrans.ptr0.map(pt => pt || <br />)}
  />, document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

uj5u.com熱心網友回復：

使用換行符將行陣列連接成一個字串：

const text = lines.join('\n');

然后將文本放入預先格式化的文本元素<pre>而不是段落元素<p>和您喜歡的樣式。

const lines = [
  "Interviewer: Nancy Carolyn Camp Foster (NF)",
  "",
  "Interviewee: Edith Mills (EM)",
  "",
  "NF: Well it's kind of interesting to observe how students have turned out who've",
  "gone through Bristow schools. We lose track, we don't really realize and",
  "",
  "Other Persons: Lucy Mae Mills (LM) Unknown Woman (WS)",
];

const text = lines.join('\n');

document.querySelector('pre').textContent = text;

<pre></pre>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370912.html

標籤：javascript 反应细绳目的映射

上一篇：在Python的串列中找到五個最長的單詞并按字母順序排列它們

下一篇：計算字串中出現的數字字母