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

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