我循环访问ReactJS中的一个对象数组,其中我使用map函数循环访问每个对象.那么我可以使用
标记来分隔下一行中的每个对象吗?我试图将
标记放在循环的末尾,但不起作用.让我知道什么是正确的使用方法.代码如下所示.提前谢谢!

import React from 'react'

const items = [{
  name: "EVC",
  price: 300
},{
  name: "JVN",
  price: 500
}]

const App = () => {
  return (
    <div className='items'>
      {items.map(item=> item.name + item.price+"<br>")}
    </div>
  )
}

export default App

推荐答案

当您集中值时,为了安全起见,Reaction转义html标记.在您的例子中,<br>被视为纯文本,而不是html标记.如果你真的想要使用它的方式,如所提供的例子,有特殊的props dangerouslySetInnerHTML输出原始的html. 但是,最好是直接使用<>(React.Fragment的快捷方式)添加<br>,以便将商品数据包装在map中.如果希望在不呈现DOM中的额外元素的情况下对项进行分组,则可以使用React.fragment:

import React from 'react'
const items = [
  {
    name: "EVC",
    price: 300
  },
  {
    name: "JVN",
    price: 500
  }
];
            
const App = () => {
  return (
    <div className="items">
      {items.map((item) => (
        <>
          {item.name} {item.price} <br />
        </>
      ))}
    </div>
  );
};
export default App

Reactjs相关问答推荐

无法在列表中看到文本

在带有和设计的表格中禁用和取消选中复选框

如何用Reaction做交互式的MathML?

使用Reaction-Hook-Form时未激发React.js onBlur事件

FireBase未与Reaction应用程序连接

在动态React组件中删除事件侦听器

如何在中间件中获取 nextAuth 会话

React 错误: 只能用作 元素的子元素,从不直接渲染.请将您的 包裹在

是的验证:使用 useFieldArray 访问表单值

修改React数据表扩展组件

对于 ref 上的可见 prop 或 open 方法来react 组件,哪种方式更好?

VideoSDK api 不使用更新状态

部署到github pages时请求路径错误

MUI TextField Select 菜单的最大高度

next js 13 在获取中使用标头时动态渲染而不是静态渲染?

DatePicker MUI 如何在日历左侧显示清除文本

如果传递给挂钩的数据需要事先修改,如何使用自定义挂钩?

当状态改变时如何执行一些动作,但只针对第一次更新?

如何不旋转 mui 自动完成弹出图标?

React Hooks 表单在日志(log)中显示未定义的用户名