0a1eeea424
* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
1.9 KiB
1.9 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Introducing Inline Styles | Представление встроенных стилей |
Представление встроенных стилей
Решение
Это может быть немного сложно, потому что JSX очень похож на HTML, но не тот же .
Давайте проведем шаги, чтобы вы поняли разницу. Сначала установите тэг стиля в объект JavaScript .
class Colorful extends React.Component {
render() {
return (
<div style={{}}>
Big Red
</div>
);
}
};
Теперь у вас есть тег стиля, установленный на пустой объект. Обратите внимание, что есть два набора фигурных скобок. Это важное различие между JSX и HTML.
Во-вторых, давайте установим красный цвет.
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red' }}>
Big Red
</div>
);
}
};
Наконец, давайте установим размер шрифта в 72px.
Спойлер
class Colorful extends React.Component {
render() {
return (
<div style={{ color: 'red', fontSize: '72'}}>
Big Red
</div>
);
}
};
Обратите внимание, что атрибут JSX - это camelCase . Это еще одно важное отличие, чтобы помнить о JSX. Кроме того, вы, вероятно, заметили, что нет единицы. В JSX при настройке атрибута fontSize блок является необязательным и автоматически устанавливается в px, если он не задан вручную.