如何在React映射函数循环中使用<br>标签

huangapple go评论69阅读模式
英文:

How to use <br> Tag within React map function loop

问题

我在ReactJS中循环遍历一个对象数组,使用map函数来遍历每个对象。所以我可以使用<br>标签来在下一行分隔每个对象。我尝试在循环的末尾放置<br>标签,但它不起作用。请告诉我正确的使用方法。以下是代码。谢谢!

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
英文:

I loop through an Array of objects in ReactJS where I use map function to loop through each Object. So Can i use <br> tag to separate each objects in next line. I tried to put a <br> tag at the end of the loop but it does'nt work. Let me know what the correct way of using it. The code is as follows. Thanks in Advance!

import React from &#39;react&#39;

const items = [{
  name: &quot;EVC&quot;,
  price: 300
},{
  name: &quot;JVN&quot;,
  price: 500
}]

const App = () =&gt; {
  return (
    &lt;div className=&#39;items&#39;&gt;
      {items.map(item=&gt; item.name + item.price+&quot;&lt;br&gt;&quot;)}
    &lt;/div&gt;
  )
}

export default App

答案1

得分: 1

当您集中数值时,React 会转义HTML标签以确保安全性。在您的情况下,&lt;br&gt; 被视为纯文本,而不是HTML标签。如果您真的想要像提供的示例中那样使用它,可以使用特殊的属性 dangerouslySetInnerHTML 来输出原始HTML。

然而,更好的做法是直接使用 &lt;br&gt;,使用 &lt;&gt;React.Fragment 的缩写)将项目数据包装在 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} &lt;br /&gt;
        </>
      ))}
    </div>
  );
};
export default App;
英文:

When you concentrate values, React escapes html tags for saftety. In your case &lt;br&gt; is treated as plain text, not html tag. If you really wanted to use it the way as in provided example, there is special prop dangerouslySetInnerHTML to output raw html.
However, it's better to add &lt;br&gt; directly using &lt;&gt; (shortcut for React.Fragment) to wrap your item data inside map. You can use React.fragment when you want to group items without rendering extra element in the DOM:

import React from &#39;react&#39;
const items = [
  {
    name: &quot;EVC&quot;,
    price: 300
  },
  {
    name: &quot;JVN&quot;,
    price: 500
  }
];
            
const App = () =&gt; {
  return (
    &lt;div className=&quot;items&quot;&gt;
      {items.map((item) =&gt; (
        &lt;&gt;
          {item.name} {item.price} &lt;br /&gt;
        &lt;/&gt;
      ))}
    &lt;/div&gt;
  );
};
export default App

答案2

得分: 1

避免在段落之间使用&lt;br&gt;,尽量避免使用。

&lt;p&gt;&lt;/p&gt;有自己的换行,因此可以使用它,如果需要更多空间,请在样式中使用margin

英文:

Avoid using &lt;br&gt; for space between paragraphs whenever you can.

const App = () =&gt; {
  return (
    &lt;div className=&#39;items&#39;&gt;
      {
      items.map((item, index) =&gt; {
       return(
        &lt;div key={item + index} className=&quot;itemContainer&quot;&gt;
            &lt;p className=&quot;paragraph&quot;&gt;{item.name + &quot; &quot; + item.price}&lt;/p&gt; {/*Empty quotes are for space between the name and price*/}
        &lt;/div&gt;
)
})
      }
    &lt;/div&gt;
  )
}

&lt;p&gt;&lt;/p&gt; has it's own line break so use it instead and use margin in your styles for more space if you see fit.

huangapple
  • 本文由 发表于 2023年2月27日 01:20:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75573742.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定