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

IT技术 javascript reactjs
2021-04-21 02:53:44

我正在使用react。我想<br>在字符串之间添加换行符

“没有结果”和“请尝试另一个搜索词。”。

我努力了 'No results.<br>Please try another search term.'

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

任何想法如何解决它？

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

6个回答

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

<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>
   );
}
@joedotnotmyErrorString是字符串还是 jsx 对象？
2021-05-24 02:53:44
?? 对我不起作用。在渲染的返回方法中，我有 <div> {this.state.myErrorString}</div>，其中 myErrorString 本身以 <div> 开头，以 </div> 结尾，里面有 <br/>，并显示所有标签！
2021-05-25 02:53:44
它是一个字符串；例如： this.setState({myErrorString : "<div>it is a string.<br/>continue here</div>"}) 然后我在 jsx 中渲染它；例如：render() { return <div>{this.state.myErrorString}</div> }
2021-06-03 02:53:44
看起来像 let movieList = 一个 jsx 对象！那么我如何从一个字符串状态转换为一个 jsx 对象呢？
2021-06-04 02:53:44
这是一个完全不同的问题。为什么首先使用字符串而不是 jsx 对象？
2021-06-14 02:53:44

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

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.
奇迹般有效！
2021-06-05 02:53:44
最好的修复方法！
2021-06-10 02:53:44
新来的反应，所以我的想法是：我将如何在纯 html 中添加换行符？那么为什么我必须创建这个人为的类来在反应中添加一个新行？
2021-06-10 02:53:44
这应该是唯一的和公认的答案
2021-06-16 02:53:44
好东西！我推荐这种方法。
2021-06-21 02:53:44

将文本分行：

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 中显示的换行符的字符串的 prop/变量，如下所示：

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

为了使其工作，我们需要使用\n代替 break 标记<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.
其它你可能感兴趣的问题
上一篇react componentDidMount 不触发 下一篇Jest 模拟react上下文