我如何映射对象中的字符串，其中空字符串被视为空行并且每个字符串限制为一行

Posted 2023-03-17

【中文标题】我如何映射对象中的字符串，其中空字符串被视为空行并且每个字符串限制为一行

【英文标题】：how can i map the string that are in the object where empty string considered as empty line and each string restricted to one line

【发布时间】：2022-01-07 02:21:20

【问题描述】：

"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：嗯，观察学生们是如何变成谁的，这有点有趣 通过布里斯托学校。我们迷失了方向，我们没有真正意识到并且

其他人：露西·梅·米尔斯 (LM) 无名女性 (WS)

我调用 Transcript 组件的组件

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

成绩单组件

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

【问题讨论】：

这能回答你的问题吗？ How to render an array of objects in React?

我已经尝试过，但该解决方案对我不起作用。

向我们展示您的尝试，因为我相信它应该可以解决问题。

在该示例中，键只有一个值，而在我的情况下，该键只有一个键和多个值，我很困惑

【参考方案1】：

您的代码似乎正在执行您希望它执行的操作。如果您的问题是未显示新行，则可以在字符串为空时返回 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>

【参考方案2】：

使用换行符将行数组连接成单个字符串：

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

然后将文本放入 preformatted text element <pre> 而不是 paragraph element <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>