我在用react.我想在<br>条线之间加一条线

"没有结果"和"请try 其他搜索词".

我试了'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>
       );
   }

推荐答案

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

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

因 for each 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>
   );
}

Reactjs相关问答推荐

如何通过TEK查询将对象传递到Express后台

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

如何在React中的textarea中显示字符数?

App.js中的H2组件不会动态呈现.这可能是什么问题?

未定义发送的数据无法在reactjs中找到原因

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

如何更新 FunctionComponentElement 的 props

Yup.number().integer() 不将 1.0 视为小数,如何解决这个问题?

React中useAuthenticator的authState在成功登录后仍保持未认证状态 - 需要强制刷新

ReactJS中使用setState方法时,Context内部的State未进行更新

React - 将一个充满空值的无限大小的数组存储在 ref 中是否可以,或者我应该重置数组吗?

useEffect 渲染没有依赖数组的组件

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

如何使用 redux 和 react-plotly.js

docker:来 automorphic 护进程的错误响应:未指定命令.的原因是什么?

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

Mui CardMedia 的图片组件

单击当前子div时如何更改p标签的图像和样式?react

为什么我不能使用 formik 更改此嵌套对象中的值

为什么 state redux-toolkit 是代理?