如何在两个字符串之间的 actjs 中添加 < br > 标记？

试试 跨度

return (
<div className='movieList'><span>{movieList}</span></div>
);

您应该使用 JSX 而不是 string:

<div>No results.<br />Please try another search term.</div>

因为每个 jsx 应该有一个包装器，所以我为字符串添加了一个 <div>包装器。

这是你的代码:

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>
);
}

将文本分行:

render() {
...
<div>
{this.props.data.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}
</div>
...

有些 HTML 元素(如 <img>和 <input>)只使用一个标记。这种属于单个标记元素的标记既不是开始标记，也不是结束标记。那些是自动关闭标签。

在 JSX 中，必须包含斜杠。因此，删除 <br>并尝试 <br />

我是这么绕过去的。让 message 成为道具/变量，它的字符串包含要在 HTML 中显示的换行符，如下所示:

message = 'No results.<br>Please try another search term.';
<div>
{message}
</div>

为此，我们需要使用 \n而不是中断标记 <br>，并在此消息的包装器元素上设置以下 css，如下所示:

message = 'No results.\nPlease try another search term.';
<div className="msg-wrapper">
{message}
</div>

CSS:

.msg-wrapper {
white-space: pre-wrap;
}

产出:

No results.
Please try another search term.

您可以使用 CSS 空白来解决这个问题。

反应元件

render() {
message = `No results. \n Please try another search term.`;
return (
<div className='new-line'>{message}</div>
);
}

CSS

.new-line {
white-space: pre-line;
}

输出

No results.
Please try another search term.

如果你像我一样不想添加 css，你可以这样做:

render () {
...
return (
...
<Typography component="p">
...
{(contact.lastname)?<div>Hello {contact.firstname} {contact.lastname}</div>:''}
...
</Typography>
...
);
}

只需用 /n分割文本，我这样做:

<div>
{text.split('\n').map((item, i) => <p key={i}>{item}</p>)}
</div>

使用“ < br > 对我很有用，但是我不确定这是否是解决问题的正确方法:

 import React from 'react';
import ReactDOM from 'react-dom';


let element = (
<div>
<h1> Hello world</h1>
This is just a sentence <br></br>
But This line  should not be in the same previous line. <br></br>
The above content proves its working. <br></br>
npm v6.14.6 | react : {React.version}
</div>
);


ReactDOM.render(element,document.getElementById("html-element-id"))

可以添加 span 标记并将 block 作为类添加。

Pomodoro Technique Timer <span className="block">with Bla</span>

如果你不想把字符串放在 <div>里面，你可以用 <>来做。

像这样:

var text = <>This is a text in the first line;<br />this is a text in a second line</>;

我所做的最简单的事情就是创建一个组件。

const EmptySpace = ({ spaceCount = 0 }) => {
return (
<>
{Array.from({ length: spaceCount }, (item, index) => {
return <br key={index} />;
})}
</>
);
};


export default EmptySpace;

<EmptySpace spaceCount={1} />

In your case you could do something like this:

const msg = (
<p>
No results <EmptySpace spaceCount={2} />
Please try another search term.
</p>
);