Вставка данных в атрибут style из переменных в React
В прошлом уроке мы писали объект прямо в
атрибуте style. Мы также можем
использовать вставку данных в этот объект
из переменных.
Давайте возьмем наш React компонент без CSS стилей:
function App() {
return (
<div>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
);
}Сейчас мы будем создавать переменные и присваивать им значения CSS свойств. Начнем по-порядку со стилей для дива.
В файле компонента перед командой
return создадим переменную
wd1 и присвоим ей значение
'200px':
const wd1 = '200px';Подобным образом создадим переменные для всех значений свойств нашего дива:
const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';Теперь добавим переменные для первого абзаца:
const co1 = 'orangered';
const fw1 = 'bold';Для второго абзаца:
const fs1 = 'italic';
const co2 = 'brown';
И, наконец, для последнего. Здесь
понадобится только две, а не три
переменные. Не имеет смысла повторяться,
ведь значение bold у нас уже
есть для первого абзаца:
const bco1 = 'orange';
const co3 = 'white';
А сейчас мы подставим переменные
со значениями стилей. Давайте,
сделаем это для первого абзаца. Вставим
переменные co1 и fw1
вместо значений в объекте:
<p style = {{ color: co1, fontWeight: fw1 }}>
text
</p>Подобным образом поступим с остальными тегами.
В результате наш код компонента будет выглядеть так:
function App() {
//для div:
const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';
//для первого p:
const co1 = 'orangered';
const fw1 = 'bold';
//для второго p:
const fs1 = 'italic';
const co2 = 'brown';
//для третьего p:
const bco1 = 'orange';
const co3 = 'white';
return (
<div style = {{
width: wd1,
border: br1,
padding: pd1,
textAlign: ta1 }}>
<p style = {{ color: co1, fontWeight: fw1 }}>
text
</p>
<p style = {{ fontStyle: fs1, color: co2 }}>
text
</p>
<p style = {{
backgroundColor: bco1,
fontWeight: fw1,
color: co3 }}>
text
</p>
</div>
);
}Модифицируйте код решения задачи к прошлому уроку так, чтобы значения CSS свойств хранились в переменных.