Question

我正在使用反应。我想在字符串

之间添加换行符<br>

'没有结果'和'请尝试其他搜索字词。'。

我试过了'No results.<br>Please try another search term.'

但它不起作用，我需要在html中添加<br>。

任何想法如何解决？

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

Answer 1

您应该使用JSX而不是string：

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

因为每个jsx都应该有1个包装器，所以我为字符串添加了一个<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>
   );
}

Answer 2

将文字分成行：

Open https://developers.facebook.com and click on "tools" then click on "Graph API".

For more information please refer below link

Answer 3

只需用/n分割文本，我就是这样进行的：

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

Answer 4

某些HTML元素（例如<img>和<input>仅使用一个标记。属于单标记元素的标记不是开始标记，也不是结束标记;这是一个自我关闭的标签。在JSX中，您必须包含斜杠。因此，请删除<br>并尝试<br />

Answer 5

如果您喜欢我的情况，并且不想添加CSS，则可以这样做：

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

Answer 6

如果您不想将字符串放在 <div> 中，您可以使用 <> 来完成。

像这样：

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

Answer 7

尝试使用 span

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

Answer 8

这是我如何解决此问题的方法。让message为具有包含要在HTML中显示的换行符的字符串的prop / variable，如下所示：

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

要执行此操作，我们需要使用\n而不是中断标记<br>，并在此消息的wrapper元素上设置以下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.

Answer 9

这是我解决问题的方法。

反应组件

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.

Answer 10

使用`
对我有用，但是我不确定这是否是解决问题的确切方法：

 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"))

Answer 11

您可以添加 span 标签并将块添加为类。

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

如何在两个字符串之间的reactjs中添加一个标签？

11 个答案: