如何在Reactjs中在两个字符串之间添加一个<br>标签？

Question

如何在Reactjs中在两个字符串之间添加一个<br>标签？

javascriptreactjs

90

我正在使用React，我想在字符串之间添加一个换行符<br>。

分别是'没有结果'和 '请尝试其他搜索词'。

我尝试过使用'没有结果.<br>请尝试其他搜索词。'

但是它不起作用，我需要在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>
       );
   }

- Radex

13个回答

84

你可以使用CSS white-space来解决这个问题。

React 组件

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.

- Gulfam

5

最好的修复方法！ - Dayglor

2

这应该是唯一且被接受的答案。 - T.Chmelevskij

3

我对React还很陌生，所以我的想法是：在纯HTML中如何添加换行？那么为什么我在React中必须创建这个不自然的类来添加新行呢？ - Nilesh

2

不错！我推荐这种方法。 - Yohan W. Dunon

1

@Nilesh 在HTML中添加换行标签是没有必要的，因为CSS可以直接显示内容中的字面换行符。在React中，所有文本内容都经过了清理，因此如果您不控制源代码，则更难输出带有HTML换行符的文本，除非您进行一些JavaScript解析（对于小问题来说过于复杂）或使用dangerouslySetInnerHTML（对于用户输入来说存在风险）。 - ADTC

记录此答案。 - Nagama Inamdar

19

将文本断行：

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

- Алексей Носиков

15

一些HTML元素，例如<img>和<input>仅使用一个标签。这些标签属于单标签元素，不是开放标签也不是闭合标签。它们被称为自闭合标签。

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

- mengru zhang

10

以下是我解决这个问题的方法。假设message是包含换行符的字符串的 prop/变量，要在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.

- Peter

4

如果你不想将字符串放在一个<div>中，你可以使用<>来实现。像这样：

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

- Gabriel Stafoca

我想让我的代码直接内联，但是React.Fragment是实现这一点的方法。 - codescribblr

3

只需按/n拆分文本，我是这样做的:

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

- Idan

1

尝试使用标签。

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

- Sankar

1

如果您和我一样不想添加CSS，则可以这样做：

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

- Flavien M.

0

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

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

export default EmptySpace;

<EmptySpace spaceCount={1} />

在你的情况下，你可以这样做：

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

- maazu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dekel · Accepted Answer

您应该使用JSX而不是字符串：

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