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

Question

我正在使用反应。我想在字符串之间添加换行符<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> 
 
     ); 
 
    }

Answer 1

您应该使用的，而不是字符串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> 
    ); 
} 

Answer 2

尝试用跨度

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

Answer 3

突破文本行：

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