Как я могу l oop массив в стиле inline в 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',
  }

Сначала я преобразовал объект в массив и хочу использовать карта для l oop массива во встроенном стиле. Но этот способ не работает. Как я могу l oop массив в стиле inline в jsx?

Answer 1

Я не понимаю, почему вы это сделали, но если это важно для вашего проекта, вы можете попробовать сохранить l oop в переменной и применить Object.fromEntries внутри style property.

Вот так:

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

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

Но если это l oop не имеет решающего значения, вы можете стилизовать свои элементы внутри 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>
    );

Answer 2

в Jsx вы можете использовать объект внутри style = {}, например:

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

, но если вам все равно нужно это сделать, вы можете сделать это следующим образом.

введите описание ссылки здесь

но это не нужно, поскольку вы можете сделать это способом, упомянутым выше

Мой Engli sh не очень хорошо, извини, надеюсь тебе помог