我如何映射对象中的字符串,其中空字符串被视为空行并且每个字符串限制为一行
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
{
"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) 无名女子 (WS)
我调用脚本组件的组件
<Transcript
transcript={objecttrans.ptr0.map(pt=>{
return pt
})}
/>
成绩单组件
return (
<>
<div className="content">
<p>{props.transcript}</p>
</div>
</>
);
使用换行符将行数组连接成一个字符串:
const text = lines.join('\n');
然后将文本放入 preformatted text element <pre>
instead of a 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>
您的代码似乎在执行您希望它执行的操作。如果您的问题是未显示新行,则可以在字符串为空时 return 一个 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>
{
"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) 无名女子 (WS)
我调用脚本组件的组件
<Transcript
transcript={objecttrans.ptr0.map(pt=>{
return pt
})}
/>
成绩单组件
return (
<>
<div className="content">
<p>{props.transcript}</p>
</div>
</>
);
使用换行符将行数组连接成一个字符串:
const text = lines.join('\n');
然后将文本放入 preformatted text element <pre>
instead of a 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>
您的代码似乎在执行您希望它执行的操作。如果您的问题是未显示新行,则可以在字符串为空时 return 一个 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>