我在我的应用程序中使用React/JSX是为了实现我想要的,还有Lodash.

我需要根据条件重复一个元素一定的次数.我该怎么做?

以下是要点:

<span className="busterCards">♦</span>;

我是这样分配的:

let card;
if (data.hand === '8 or more cards') {
  card = <span className='busterCards'>♦</span>;
}

在这种情况下,我需要重复元素8次.使用Lodash的过程应该是什么?

推荐答案

干得好:

let card = [];
_.times(8, () => {
  card.push(<span className="busterCards">♦</span>);
});

您可能希望 for each span元素添加键,这样React就不会抱怨缺少键属性:

let card = [];
_.times(8, (i) => {
  card.push(<span className="busterCards" key={i}>♦</span>);
});

有关.times的更多信息,请参阅此处:https://lodash.com/docs#times

Reactjs相关问答推荐

运行 node server.js会导致以下错误:Route.post()需要回调函数,但在Route.&处得到了[对象Undefined] lt;计算>

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态,而不是呈现?<>

如何在整个应用程序中显示通用弹出窗口中的点击事件

react -无法获取函数的最新参数值

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

Symfony ux-react:使用react_component()时React组件不会渲染

在 golang 服务器中刷新或直接 url 路径时响应 404

Spring Boot + React + MySQL应用的架构层面有哪些?

React Router v6 路径中的符号

无法设置 null 的属性(设置src)

位于组件material-ui中的TextField中的 map 功能不起作用

如何使用 React 在客户端获取 nestjs websocket 异常错误?

React JS:如何判断用户使用的是浏览器 url 还是桌面 electron

响应式媒体 React Tailwind

添加 React/Redux 组件模板的 VS Code 扩展

如何使图标适合 react-bootstrap 中的行元素

调用 Jest 和服务方法的问题

如何从一组对象映射 MUI 5 图标并更改其 colored颜色 ?

如何定制 React 热 toastr ?

在react 钩子中将数组添加到数组状态给出一个数字