时间戳

首页 > 解决方案 > 如何在 jsx 中以内联样式循环数组？

javascript - 如何在 jsx 中以内联样式循环数组？

问题描述

这是部分代码：

let entries = Object.entries(customStyles);
       <div
        style={[...this.entries].map((item, i) => {
          return item[0] + ': ' + item[1] + ',';
        })}
        onClick={() => this.toggleDropdown(toggled)}
      >
        {selected.label}
      </div>

我的问题是：customStyles 是一个对象，例如

customStyles: {
    background: '#14c944',
    color: '#1231e0',
  }

我首先将对象转换为数组，我想使用映射以内联样式循环数组。但这种方式行不通。如何在 jsx 中以内联样式循环数组？

标签： javascriptreactjsloopsinline-styles

解决方案

在 Jsx 中，您可以在 style={} 中使用对象，例如：

<div style={{ height: '100px' }}>My Div</div>

但如果你无论如何都需要这样做，你可以这样做。

在此处输入链接描述

但这是不必要的，因为您可以按照上述方式进行操作

我的英语不是很好，对不起，希望对你有所帮助

推荐阅读