代码之家 › 专栏 › 技术社区 › Ben

逗号到新行

reactjs

-1

Ben · 技术社区 · 5 年前

在反应中,我怎样才能转身 , 把角色换成新行?

假设我们有这样一个数组:

const items = [
    {
        label: "Animals",
        value: "Puppies, Kittens, Bunnies"
    },
    // ...
];

我们这样展示:

<div>
    {items.map(item => (
        <div style="left">
            {item.label}
        </div>
        <div style="right">
            {item.value}
        </div>
    ))};
</div>

我怎样才能把所有的 , 剧中的人物 value 将数组项的键放入新行?

电流输出:

Animals    Puppies, Kittens, Bunnies

期望输出:

Animals    Puppies
           Kittens
           Bunnies

1 回复 | 直到 5 年前

AKX Bryan Oakley 5 年前

{item.value.split(", ").map((line, i) => <div key={i}>{line}</div>)}

如果把每一项都放在 div 对你来说没关系。

另一个更复杂的选择是添加 <br> 在每一行之间,用一个 React.Fragment :

function addBrs(items) {
  const children = [];
  items.forEach((item) => {
    children.push(item);
    children.push(<br />);
  });
  children.pop(); // Remove last extraneous BR
  return React.createElement(React.Fragment, {}, ...children);
}

// ...

{addBrs(item.value.split(", "))}}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前