Как изменить стиль реагирующего компонента? Это будет ошибка цвета фона, но при удалении она выведет 'hello' Я хочу стиль, основанный на свойстве в объекте в реакции.Стилирование объекта с использованием React
1
A
ответ
0
В Реагировании мы используем camelCase при указании желаемых имен стиля CSS.
In React, встроенные стили не указаны в виде строки. Вместо этого они указаны с объектом, ключом которого является версия camelCased из имя стиля https://facebook.github.io/react/tips/inline-styles.html
Вот демо, как можно условно применить стили в зависимости от значений сохраняется в состоянии: http://codepen.io/PiotrBerebecki/pen/xEyqER
class App extends React.Component {
constructor() {
super();
this.state = {
msg: [
{msg: {author: {name: 'Rich'}}},
{msg: {author: {name: 'John'}}},
{msg: {author: {name: 'Pete'}}}
]
};
}
render() {
const style1 = {
backgroundColor: 'red'
};
const style2 = {
backgroundColor: 'blue'
};
const style3 = {
backgroundColor: 'gray'
};
const getStyleName = (name) => {
switch (name) {
case 'Rich':
return style1;
case 'John':
return style2;
default:
return style3;
}
};
const renderNames = this.state.msg.map((item, index) => {
return (
<p key={index} style={getStyleName(item.msg.author.name)}>
{item.msg.author.name}
</p>
);
})
return (
<div>
<h1>React</h1>
{renderNames}
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Смежные вопросы
- 1. Стилирование с использованием Javascript Cookie
- 2. Стилирование веб-приложений с использованием форм Orbeon
- 3. Стилирование кнопки отправки с использованием формы zend
- 4. Стилирование переключателей
- 5. Стилирование Microsoft Word Word
- 6. Стилирование конкретной ячейки таблицы с использованием Vue.js и v-repeat
- 7. Отображение изображения с использованием React
- 8. Статический сайт с использованием React
- 9. Стилирование 4 углов блока
- 10. Стилирование поля ввода
- 11. Стилирование скрытого раскрывающегося меню
- 12. Стилирование: посетил псевдоэлемент
- 13. Стилирование двух таблиц отдельно
- 14. Стилирование контейнера изображений
- 15. Вводные поля HTML Стилирование
- 16. Стилирование диаграмм внешне
- 17. Стилирование текстового содержимого
- 18. React: Получение объекта по щелчку
- 19. React Router v4 Match переходы с использованием React Motion
- 20. Стилирование изображений с помощью CSS/Javascript
- 21. Стилирование меню «ListView» с круглыми углами
- 22. Стилирование встроенных XML-тегов с XSLT
- 23. Стилирование HTML с нечетными/четными цветами
- 24. Стилирование PHP-вывода с помощью файла CSS
- 25. Стилирование таблицы, созданной с помощью Javascript
- 26. Стилирование строк таблицы с чередующимся цветом фона
- 27. Стилирование PHP-вывода с внешней таблицей стилей
- 28. Стилирование повторяющегося фона svg с помощью css
- 29. React/AFRAME ошибка объекта правопреемником
- 30. Ссылка на экземпляр объекта - React
хорошо, хорошо выглядит. последнее, что нужно уточнить, если я хотел просто применить эти стили к определенному классу, как я могу это сделать? в настоящее время ваш делает фон всей страницы! –
Я обновил код и ответ. Я обновлю его через пару минут. –
oh, а также, возможно, вы заметили, что у меня есть hardcoded '[0]', но мне бы хотелось [i] 'и повторить массив. как это можно достичь? Я попытался включить цикл for, но мне не нравится это внутри стилей const, и если я ставил стили const внутри цикла for, он не распознает его позже ... –