Изменение встроенного CSS, условно основанного на состоянии компонента
На этом этапе вы видели несколько приложений условного рендеринга и использование встроенных стилей. Вот еще один пример, который объединяет обе эти темы. Вы также можете визуализировать CSS на основе состояния компонента React. Для этого вы проверяете условие, и если это условие выполнено, вы изменяете объект стилей, назначенный элементам JSX в методе рендеринга. Эта парадигма важна для понимания, потому что это драматический переход от более традиционного подхода применения стилей, изменяя непосредственно элементы DOM (что очень часто встречается с jQuery, например). В этом подходе вы должны отслеживать, когда элементы меняются, а также обрабатывать фактическую манипуляцию напрямую. Может быть сложно отслеживать изменения, потенциально делая ваш пользовательский интерфейс непредсказуемым. Когда вы устанавливаете объект стиля на основе условия, вы описываете, как пользовательский интерфейс должен выглядеть в зависимости от состояния приложения. Существует четкий поток информации, который движется только в одном направлении. Это предпочтительный метод при написании приложений с помощью React.
Редактор кода имеет простой управляемый компонент ввода со стилизованной рамкой. Вы хотите, чтобы эта граница была красной, если пользователь вводит более 15 символов текста в поле ввода. Добавьте условие, чтобы проверить это, и, если условие действительно, установите стиль границы ввода на 3 пикселя сплошным красным. Вы можете попробовать это, введя текст в поле ввода.