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

Question

部分代码如下：

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',
  }

我先把对象转成数组，想用map以内联的方式循环数组。但这种方式行不通。如何在 jsx 中以内联样式循环数组？

Answer 1

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

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

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

enter link description here

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

我的英文不是很好，不好意思，希望对你有帮助

Answer 2

我不明白你为什么要这样做，但如果它对你的项目很重要，你可以尝试将循环保存在一个变量中并在 style property.[= 中应用 Object.fromEntries 17=]

像这样：

let entries = Object.entries(customStyles).map((item, i) => {
        return [item[0], item[1]];
    })  

    return (
        <div>
            <p style={Object.fromEntries(entries)}>Example</p>            
        </div>
    );

但是如果这个循环不是很重要，您可以在 style property.

中设置元素的样式

return (
        <div>
            <p style={{background: '#14c944', color: '#1231e0'}}>Example</p>          
        </div>
    );

或者只使用 spread operator:

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

    return (
        <div>
            <p style={{...customStyles}}>Example</p>           
        </div>
    );

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

How can I loop an array in the inline style in jsx?

javascript

loops

inline-styles

reactjs