Javascript 如何在两个字符串之间的reactjs中添加<br>标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45935733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a <br> tag in reactjs between two strings?
提问by Radex
I am using react. I want to add a line break <br>between strings
我正在使用反应。我想<br>在字符串之间添加换行符
'No results' and 'Please try another search term.'.
“没有结果”和“请尝试另一个搜索词。”。
I have tried 'No results.<br>Please try another search term.'
我试过了 'No results.<br>Please try another search term.'
but it does not work, I need to add the <br>in the html.
但它不起作用，我需要<br>在 html 中添加。
Any ideas how to solve it?
任何想法如何解决它？
render() {
let data = this.props.data;
let isLoading = this.props.isLoading;
let isDataEmpty = Object.entries(data).length === 0;
let movieList = isLoading ? <Loader /> : isDataEmpty ? 'No results. Please try another search term.' :
Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
return (
<div className='movieList'>{movieList}</div>
);
}回答by Dekel
You should use JSX instead of string:
您应该使用 JSX 而不是字符串：
<div>No results.<br />Please try another search term.</div>
Because each jsx should have 1 wrapper I added a
<div>wrapper for the string.
因为每个 jsx 应该有 1 个包装器，所以我
<div>为字符串添加了一个包装器。
Here it is in your code:
这是在您的代码中：
render() {
let data = this.props.data;
let isLoading = this.props.isLoading;
let isDataEmpty = Object.entries(data).length === 0;
let movieList = isLoading ? <Loader /> : isDataEmpty ? <div>No results.<br />Please try another search term.</div> :
Object.entries(data).map((movie, index) => <MovieTile key={index} {...movie[1]} />);
return (
<div className='movieList'>{movieList}</div>
);
}
回答by Алексей Носиков
break text to line:
将文本分行：
render() {
...
<div>
{this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
</div>
...
回答by mengru zhang
some HTML elements such as <img>and <input>use only one tag. The tag that belongs to a single-tag element isn't an opening tag nor a closing tag; it's a self-closing tag.
In JSX, you have to include the slash. So, remove <br>and try <br />
一些 HTML 元素，例如 <img>和 <input>只使用一个标签。属于单标签元素的标签既不是开始标签也不是结束标签；这是一个自闭合标签。在 JSX 中，您必须包含斜杠。所以，删除<br>并尝试<br />
回答by Gulfam
Here is how I solved the problem.
这是我解决问题的方法。
React Component
反应组件
render() {
message = `No results. \n Please try another search term.`;
return (
<div className='new-line'>{message}</div>
);
}
CSS
CSS
.new-line {
white-space: pre-line;
}
OUTPUT
输出
No results.
Please try another search term.
回答by Flavien M.
If you are like in my situation and you don't want to add css, you can do that :
如果您像我的情况一样并且不想添加 css，您可以这样做：
render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}
回答by Vishal Gulati
Here is how I got around this. Let message be the prop/variable that has the string containing line breaks to be displayed in HTML as follows:
这是我解决这个问题的方法。让 message 是包含要在 HTML 中显示的换行符的字符串的道具/变量，如下所示：
message = 'No results.<br>Please try another search term.';
<div>
{message}
</div>
To make this work, we need to use \ninstead of break tag <br>and set the following css on the wrapper element of this message as follows:
为了使其工作，我们需要使用\n代替 break 标记<br>并在此消息的包装器元素上设置以下 css，如下所示：
message = 'No results.\nPlease try another search term.';
<div className="msg-wrapper">
{message}
</div>
CSS:
CSS：
.msg-wrapper {
white-space: pre-wrap;
}
OUTPUT:
输出：
No results.
Please try another search term.
回答by Idan
Just split text by /n, I do this in this way:
只需按 拆分文本/n，我这样做：
<div>
{text.split('\n').map((item, i) => <p key={i}>{item}</p>)}
</div>
回答by Sankar
Try with span
尝试跨度
return (
<div className='movieList'><span>{movieList}</span></div>
);
