Как сделать условие отрисовки css в div в react
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Я реагировать компоненты. Я добавил CSS inline в компоненты, как предложено в эта блестящая презентация один из парней позади реагировать. Я всю ночь пытался найти способ добавить псевдоклассы CSS inline, как на слайде под названием":: after " в презентации. К сожалению, мне не просто нужно добавить content:""; собственность, а также position:absolute; -webkit-filter: blur(10px) saturate(2); . Слайды показывают, как добавить контент через , а как бы вы добавить свойства?
получил ответ от @Vjeux в реагировать команда:
обычный HTML / CSS:
реагировать со встроенным стилем:
фокус в том, что вместо использования ::after в CSS, чтобы создать новый элемент, вы должны вместо этого создать новый элемент через React. Если вы не хотите добавлять этот элемент везде, сделайте компонент, который делает это за вас.
для специальных атрибутов, таких как -webkit-filter , способ кодирования их заключается в удалении тире-и заглавной буквы. Так он превращается в WebkitFilter . Обратите внимание, что делать также должны работать.
встроенные стили нельзя использовать для целевых псевдоклассов или псевдо-элементов. Вам нужно использовать таблицу стилей.
Если вы хотите генерировать CSS динамически, то самый простой способ-создать элемент DOM
встроенный стиль не поддерживает псевдонимы или at-правила (например, @media). Рекомендации варьируются от возможности переопределить CSS в JavaScript для государства CSS вроде :hover via onMouseEnter и onMouseLeave использовать больше элементов для воспроизведения псевдо-элементов, таких как :after и :before просто использовать внешнюю таблицу стилей.
лично не нравится все эти решения. Переопределение функций CSS с помощью JavaScript не масштабируется хорошо - также не добавляет лишнего разметка.
представьте себе большую команду, в которой каждый разработчик воссоздает функции CSS, такие как :hover . Каждый разработчик будет сделайте это по-другому, так как команды растут в размерах, если это можно сделать, это будет сделано. Факт в том, что с JavaScript есть около n способы переопределения функций CSS, и со временем вы можете сделать ставку на каждый из этих способов, реализуемых с конечным результатом, являющимся кодом спагетти.
так что делать? использовать CSS. Да, ты спросил. о встроенном стиле предполагается, что вы, вероятно, в CSS-in-JS camp (я тоже!). Обнаружили, что colocating HTML и CSS так же ценны, как colocating JS и HTML, многие люди просто не понимают этого еще (JS-HTML colocation тоже сначала сопротивлялся).
сделал решение в этом пространстве под названием Стиль это просто позволяет писать текстовый CSS в ваших компонентах React. Не нужно тратить циклы на изобретение CSS в JS. Правильный инструмент для правильной работы, вот пример использования :after :
Если ты новичок в React, тебе может быть интересно, почему существует так много разных руководств, которые учат различным способам стилизации React приложения. По правде говоря, мы всё еще пытаемся понять, как лучше поступить.
Стили в React более или менее прорабатывались в таком порядке:
Я рекомендую начать с CSS в JS. Почему? Читай дальше 😄
Когда я говорю о стилях, то имею в виду написание своих CSS стилей более или менее с нуля. Если ищешь готовые компоненты, лови руководство по часто используемым React UI библиотекам.
Глобальный CSS - это, тот способ которым ты вероятно уже стилизовал веб-страницы. У тебя есть гигантский файл styles.css , и ты используешь BEM или SMACSS методологию для всех своих классов. В качестве альтернативы, у тебя есть тонна крошечных файлов, и ты не всегда знаешь, где находится каждый класс.
Мы, как frontend разработчики, быстро поняли, что глобальный CSS не масштабируется. Чем больше команда редактирует один файл, тем больше вероятность, что будет CSS, который ничего не делает (люди слишком боятся что-либо удалять, вдруг они что-то сломают).
Если ты всё еще хочешь использовать Global CSS в своем React приложении, то всё, что нужно сделать - это импортировать файл CSS на верхнем уровне приложения React (при условии, что ты настроил для этого webpack или используешь приложение create-react-app).
Модули CSS очень похожи на Global CSS в том смысле, что ты импортируешь CSS файл в свой React компонент, но внутри всё совсем иначе.
Многие проблемы, которые у нас были с Global CSS, исчезли с модулями CSS.
Твой CSS выглядит так:
а твой React компонент выглядит так:
Ключевое отличие здесь заключается в том, что только файлы, импортирующие style.css , смогут получить доступ к именам классов, которые он определяет. Более того, имена классов, сгенерированные в процессе сборки, будут уникальными.
По-настоящему круто то, что ты можешь начать экспериментировать с JavaScript, чтобы изменить стили компонента.
Правда, такой подход, начинает становиться немного запутанным, если ты используешь несколько свойств для изменения стиля и поведения компонентов. Что, если бы твои стили могли быть просто компонентами?
Вот где на помощь приходит CSS в JS.
Библиотеки, такие как styled-components и Emotion, позволяют оборачивать компоненты (включая div, spans, теги p, теги a) стилями и использовать их в качестве компонентов React.
Самое приятное, что мы можем использовать все стандартные функции CSS, к которым привыкли, такие как медиа-запросы и селекторы :hover и :focus .
Наш пример сверху теперь выглядит следующим образом:
Emotion и styled-components равномерно согласованы по производительности. Авторы styled-components работали, чтобы довести их производительность до уровня Emotion, поэтому решить, какой из них использовать не имеет больше значения.
Emotion предоставляет некоторые дополнительные возможности для стилизации: css prop. В то время как styled-components пытается сохранить единый стандартный способ работы с помощью styled API.
Руководство по стилизации React приложений было бы неполным, если бы я не упомянул CSS-фреймворки, такие как Tailwind. На самом деле тебе не нужен React для использования Utility-first CSS.
Короче говоря, Tailwind позволяет стилизовать компоненты по одному классу за раз. Вот как это выглядит:
Можно решить, что это не особо подходит для повторного использования, однако, можно использовать имена классов Tailwind с любимой библиотекой CSS in JS, используя twin.
Затем ты можешь стилизовать компоненты Tailwind:
Styled System использует styled API, предоставляемый styled-components или Emotion , и добавляет утилиты в качестве свойств, а не имен классов.
Подход Styled System особенно эффективен, когда речь идет о темах, поскольку изменить внешний вид приложения можно, заменив предоставленный тобой файл theme.js .
Твой компонент в конечном итоге будет выглядеть так:
Статически извлеченный CSS в JS
Проблема с CSS в JS заключается в том, что для загрузки CSS требуется JavaScript. Это значительно замедляет работу, поэтому люди начали искать способы извлечения CSS из CSS-in-JS во время сборки.
Есть несколько библиотек, которые могут это сделать:
Compiled и linaria позволяют нам использовать styled API, который мы знаем и любим, давая преимущество в производительности за счет отсутствия CSS в нашем бандле.
Я работал с несколькими разработчиками в моем офисе над проектами React JS, которые имеют разные уровни опыта React JS. Мы решали некоторые сумасшедшие проблемы, такие как обработка странного способа, которым Redux выполняет инициализацию состояния, и выполнение полезной нагрузки запроса axios с PHP и понимание того, что происходит в фоновом режиме . Эта статья возникла из вопроса о том, как стилизовать компоненты React.
Различные стилистические подходы
Существуют различные способы стилизации компонентов React. Выбор правильного метода для укладки компонентов не является абсолютным абсолютом. Это конкретное решение, которое должно соответствовать вашему конкретному варианту использования, личным предпочтениям и, прежде всего, архитектурным целям вашей работы. Например, я использую уведомления в React JS с использованием Noty , и стиль должен уметь обрабатывать плагины.
Некоторые из моих целей при ответе на вопрос включали в себя следующее:
- Глобальное пространство имен
- зависимости
- Повторное использование
- Масштабируемость
- Устранение мертвого кода
Кажется, существует около восьми различных способов стилизации компонентов React JS, широко используемых в промышленности для работы на уровне производства:
- Встроенный CSS
- Нормальный CSS
- CSS в JS
- Стилизованные компоненты
- CSS Модули
- Sass & SCSS
- Меньше
- допускающее применение стиль
Для каждого метода я рассмотрю необходимость зависимостей, уровень сложности и то, является ли подход действительно хорошим или нет.
Встроенный CSS
Я не думаю, что кому-то нужно введение во встроенный CSS. Это стиль CSS, отправляемый элементу напрямую с использованием HTML или JSX. Вы можете включить JavaScript-объект для CSS в компоненты React. Есть несколько ограничений, таких как замена каждого текста на camelCase. Вы можете стилизовать их двумя способами, используя объекты JavaScript, как показано в примере.
пример
Обычный CSS
Обычный CSS — это общий подход, возможно, на один шаг лучше, чем встроенный CSS. Стили могут быть импортированы на любое количество страниц и элементов, в отличие от встроенного CSS, который применяется непосредственно к конкретному элементу. Обычный CSS имеет несколько преимуществ, таких как уменьшение размера файла с чистой структурой кода.
Вы можете поддерживать любое количество таблиц стилей, и при необходимости вам будет проще изменить или настроить стили. Но обычный CSS может стать серьезной проблемой, если вы работаете над большим проектом с большим количеством людей, особенно без согласованного шаблона для стилизации в CSS.
пример
Дополнительная информация
Вы можете узнать больше о регулярном использовании CSS на странице обучения CSS в W3C. Существует множество игровых площадок, таких как JS Bin — совместная отладка JavaScript , JSFiddle , CodePen: создание, тестирование и обнаружение кода переднего плана , Repl.it — ведущей в мире платформы для онлайн-кодирования и т. Д., Где вы можете попробовать их вживую и получить результаты в режиме реального времени.
CSS в JS
- Зависимости: jss , jss-preset-default , jss-cli
- Сложность: Легко
- Подход: Достойный
CSS в JS — это инструмент разработки для CSS, который позволяет использовать JavaScript для описания стилей декларативным, бесконфликтным и повторно используемым способом. Он может компилироваться в браузере, на стороне сервера или во время сборки в Node. Он использует JavaScript как язык для описания стилей декларативным и понятным способом. Это высокопроизводительный компилятор JS-CSS, который работает во время выполнения и на стороне сервера. Размышляя о компонентах, вам больше не нужно поддерживать кучу таблиц стилей. CSS-in-JS абстрагирует модель CSS до уровня компонента, а не до уровня документа (модульность).
пример
Дополнительная информация
Вы можете узнать больше об этом подходе в официальной документации JSS. Есть также способ испытать это, используя их REPL (цикл чтения-eval-print).
Стилизованные компоненты
Styled-components является примером вышеупомянутого CSS в JS. Это в основном дает нам CSS с другими свойствами, которые вы хотели бы иметь в CSS, например, вложенность. Это также позволяет нам стилизовать CSS под переменной, созданной в JavaScript. Обычно вы можете создать компонент React вместе с прикрепленными к нему стилями, не создавая отдельный файл для CSS. Styled-компоненты позволяют нам создавать настраиваемые компоненты многократного использования, которые могут быть менее сложными в обслуживании. Реквизит можно использовать для стилизации компонентов так же, как он передается в компонентах React. Реквизиты используются вместо классов в CSS и устанавливают свойства динамически.
пример
Дополнительная информация
Styled-components имеет подробную документацию, а на сайте также есть живой редактор, где вы можете опробовать код. Получите больше информации о стилевых компонентах в стилевых компонентах: Основы .
CSS Модули
- Зависимости: css-loader
- Сложность: жесткая (использует конфигурацию загрузчика)
- Подход: лучше
Если вы когда-либо чувствовали, что проблема глобальной области видимости CSS занимает большую часть вашего времени, когда вам нужно найти, что делает конкретный стиль, или вам пришлось писать файл CSS, не организовав его должным образом, чтобы код сначала работал или если избавление от файлов вызывает у вас легкое толчок к размышлению о том, не нарушите ли вы весь код, я вас чувствую. Модули CSS гарантируют, что все стили для компонента находятся в одном месте и применяются к этому конкретному компоненту. Это, безусловно, решает проблему глобальной области видимости CSS. Компоновочная функция действует как оружие для представления общих стилей между государствами. Это похоже на миксин в Sass, что позволяет комбинировать несколько групп стилей.
пример
Sass & SCSS
пример
Дополнительная информация
Узнайте больше об использовании и установке Sass с различными языками программирования из их официальной документации на Sass: Syntaxically Awesome Style Sheets . Если вы хотите что-то попробовать, есть сервис под названием SassMeister — The Sass Playground! где вы можете поиграть с различными функциями Sass и SCSS.
Less (Leaner Style Sheets) — это язык динамических препроцессоров с открытым исходным кодом, который можно компилировать в CSS и запускать на стороне клиента или на стороне сервера. Он основан на CSS и Sass и похож на SCSS. Несколько заметных отличий включают переменные, начинающиеся со знака @ в Less и $ в Sass.
пример
Дополнительная информация
Вы можете начать с Less из официальной документации, и есть LESSTESTER, песочница Less, которая преобразует ваш код Less в CSS.
допускающее применение стиль
- Зависимости: @stylable/core , @stylable/runtime , @stylable/optimizer , @stylable/module-utils , @stylable/custom-valu
- Сложность: Сложная
- Подход: лучше
Stylable — еще один препроцессор, объединяющий Sass, SCSS и Less. Если есть проблема с удобством использования стилизованных компонентов — так как их синтаксис немного отличается от обычного CSS — это поможет. Stylable похож на CSS, но предлагает больше возможностей сделать каждый компонент незаметным. Это может сделать то, что CSS-модулям будет сложнее, например, стилизация внутренних частей пользовательского интерфейса. Помимо других свойств CSS, Stylable также предлагает пользовательские псевдо-классы и псевдо-элементы. Это свойство Stylable автоматически позволяет нам создавать собственные классы CSS, что позволяет нам делать стили для внутренних частей компонентов.
пример
Дополнительная информация
Stylable может предложить гораздо больше. Официальная документация по началу работы содержит подробное объяснение. Существует отдельная документация по интеграции React для ручной интеграции Stylable с компонентом React.
Грязные руки
Имея так много доступных вариантов, я испачкал руки и попробовал их один за другим. Благодаря Git я смог контролировать версию и сравнить все, чтобы увидеть, какой вариант является победителем. Я смог получить некоторую ясность относительно того, сколько зависимостей я использовал и как работал мой рабочий процесс при работе со сложными стилями. У меня была небольшая борьба со всем, кроме обычного CSS, CSS-модулей и SCSS.
Работа в офисе
Модули CSS помогают с импортом и другими вещами, но когда я попытался использовать его, не было особой поддержки для его расширения. Модули CSS имели проблемы, когда я использовал несколько классов и иерархий CSS. Единственная хорошая вещь — это то, что вы не получаете никаких конфликтов CSS, но недостатком является то, что ваш код CSS очень большой. Это немного похоже на методологию БЭМ.
К тому же, работа с псевдоэлементами и состояниями была адом. Иногда модули CSS даже не компилируются, когда я пытаюсь импортировать содержимое другого класса из другого файла. Я бы предпочел использовать для этого миксины в SCSS, но, к сожалению, CSS-модули все еще очень просты в этой области. Ключевое слово composes здесь почти никогда не работает для меня. Это огромный недостаток, с которым я лично столкнулся. Это может быть только моя вина за то, что я не использовал его правильно, но это не сработало даже для настоящего случая.
Персональный проект
Я использовал SCSS в качестве своей следующей попытки поработать со стилями для React. К счастью, это сработало. Сравнение SCSS с модулями CSS дало мне хорошее понимание. Есть так много общего между ними. Здесь есть одна загвоздка в том, что я уже использовал SCSS, и мне это очень удобно, так как он похож на CSS, но обладает суперспособностями. Единственное, что мне нужно сделать вместе с Create React App, это то, что мне просто нужно установить еще одну зависимость, node-sass и ничего больше. Не трогайте конфиги веб-пакетов и не удаляйте приложение React JS из CRA.
Рассматривая возможности модулей CSS, я провел небольшое сравнение между модулями SCSS и CSS и обнаружил, что у меня больше всего возможностей в SCSS. Говоря о компоновке, которая является основной причиной, по которой моя команда выбрала модули CSS, мы можем использовать @mixin и @include в SCSS, и они работают очень хорошо. Я не видел, чтобы модули CSS взаимодействовали с JavaScript, поэтому то же самое с SCSS — никакого взаимодействия с частью JavaScript. Циклы и включения с функциями являются уникальными для SCSS, поэтому я подумал о том, чтобы продолжить работу с SCSS для моего личного проекта и нового проекта в моем офисе.
Мощный?
Очевидно, SCSS является абсолютным победителем здесь. SCSS предоставляет множество новых функций по сравнению с модулями CSS. Я собираюсь сделать глубокий анализ SCSS, как это лучше и почему вы должны использовать SCSS в вашем следующем проекте.
SCSS Wins: углубленный анализ
Я люблю SCSS из-за функций, которые он предлагает. Во-первых, он очень похож на CSS. Вам не нужно изучать что-то новое, чтобы понять SCSS. Если вы знаете CSS, вы, вероятно, знаете Sass. Sass имеет два разных синтаксиса: сам Sass и SCSS, который используется чаще. Синтаксис SCSS совместим с CSS, поэтому вам просто нужно переименовать файл .css в .scss . Конечно, делая это, вы не используете ни одну из сверхспособностей и способностей, которые предоставляет Sass, но, по крайней мере, вы понимаете, что вам не нужно тратить часы и часы, чтобы начать использовать Sass. С этой отправной точки вы сможете изучать синтаксис Sass по ходу работы.
Вы можете перейти на Sass Basics, чтобы начать работать с основами. Настроить поддержку Sass для вашего проекта и начать стилизацию с использованием SCSS очень просто в случае React. Следующим преимуществом использования SCSS, как и любого препроцессора CSS, является возможность использования переменных. Переменная позволяет хранить значение или набор значений и повторно использовать эти переменные в файлах Sass столько раз, сколько вы хотите и где угодно. Легко, мощно и полезно. Это помогает организовать ваш продукт или приложение и оформить его в соответствии с потребностями клиента, не делая ничего, кроме переключения нескольких кусков кода здесь и там.
Вложение в CSS (или SCSS) — одна из лучших вещей, которые может предложить Sass. Sass позволяет вам использовать вложенный синтаксис, который представляет собой код, содержащийся в другом фрагменте кода, который выполняет более широкую функцию. В Sass, вложение позволяет более чистый способ нацеливания на элементы. Другими словами, вы можете вкладывать свои HTML-элементы с помощью CSS-селекторов . Вложение кода с помощью Sass дает множество преимуществ, главным из которых является удобство сопровождения и читаемость SCSS. Мы все слышали о концепции DRY в коде, но в CSS это предотвращает необходимость перезаписывать селекторы несколько раз. Это также помогает легче поддерживать код.
Умение использовать партиалы великолепно. Вы можете разделить SCSS в любом месте на частичные и включать их где угодно. Вы также можете разделить их на миксины и передать некоторые параметры, чтобы обеспечить совершенно другой CSS. Использование переменных — это здорово, но что если у вас есть блоки кода, повторяющиеся в вашей таблице стилей? Именно тогда в игру вступают миксины. Миксины похожи на функции в других языках программирования. Они возвращают значение или набор значений и могут принимать параметры, включая значения по умолчанию. Обратите внимание, что Sass также имеет функции, поэтому не путайте миксин с функцией.
Использование SCSS с React JS
С обновленным приложением Create React, выпущенным недавно, у нас появилось много новых инструментов для игры. Я очень рад .scss , поскольку раньше у нас .scss файлы .scss которые компилировались и записывались в файлы .css прямо в нашей структуре папок. Вы можете быть обеспокоены использованием Sass в React. Разве это не умный способ написания стилей с помощью библиотек CSS-in-JS, таких как styled-components или aphrodite ? Я полагаю, что добавление поддержки Sass к приложению Create React станет большой помощью для начинающих пользователей React. Как использовать Sass в React — один из вопросов, которые я всегда слышу от людей, вступающих в React. С дополнениями React 16.6, такими как React.memo() и функциональными дополнениями React 16.7, такими как React.memo() , начать с React будет проще, чем когда-либо!
Начнем с установки начального приложения. Вы можете сделать это, запустив npm install -g create-react-app npx create-react-app npm install -g create-react-app глобально или используя npx create-react-app чтобы установить и сразу вызвать его, чтобы ваш установленный пакет не находился нигде в ваших глобальных переменных. Проверьте больше о NPX .
Установить node-sass зависимость
Давайте запустим npm install node-sass чтобы установить node-sass чтобы помочь в компиляции вашего scss в css .
Вот и все — мы сделали. Мы можем проверить конфигурацию, изменив наш файл index.css файл index.scss и опробовав некоторые интересные функции Sass / SCSS .
Общие примеры
Вот способ использования переменных в SCSS:
Создав переменные, вы можете использовать их везде, где вам нужно, например:
Однако следует помнить, что слишком глубокое вложение не является хорошей практикой. Чем глубже вы вкладываете, тем более многословным становится файл Sass, и тем больше потенциально может быть скомпилированный CSS, поскольку при компиляции вложенность выравнивается. Таким образом, чрезмерное использование вложенности может создать слишком специфические правила CSS, которые сложно поддерживать. Есть вероятность, что селекторы не могут быть повторно использованы, а также есть проблемы с производительностью. Вложенные селекторы создадут длинную строку селектора CSS, которая в итоге создаст больший файл CSS.
Завершение
CSS-препроцессоры здесь, чтобы остаться. Они расширяют базовые функции CSS, предоставляя вам набор мощных функций, которые сразу же повысят вашу производительность. Мы упомянули несколько преимуществ, но есть еще много, таких как наследование, функции, управляющие директивы и выражения, такие как if() , for() или while() , типы данных, интерполяция и т. Д. Чтобы стать гуру Sass, может потребоваться немного время — все, что вам нужно сделать, это просмотреть файлы Bootstrap Sass, чтобы увидеть, как Sass может превратиться в сложную вещь. Но изучение основ и настройка его для вашего проекта не займет у вас много времени.
Сегодня я начал изучать ReactJS и через час столкнулся с проблемой. Я хочу вставить компонент с двумя строками внутри div на странице. Упрощенный пример того, что я делаю ниже.
У меня есть html:
Визуализируйте функцию так:
И ниже я призываю сделать:
Сгенерированный HTML выглядит так:
Проблема в том, что я не очень рад, что React заставляет меня обернуть все в div "DeadSimpleComponent". Каков лучший и простой обходной путь без явных манипуляций с DOM?
ОБНОВЛЕНИЕ 28.07.2017. Специалисты React добавили такую возможность в React 16 Beta 1
Начиная с React 16.2, вы можете сделать этот:
Это требование было удалено в версии React (16.0)] 1, поэтому теперь вы можете избежать этого обертка .
Вы можете использовать React.Fragment для визуализации списка элементов без создания родительского узла, официальный пример:
Используйте [] вместо () для переноса всего возврата.
Это по-прежнему необходимо , НО Теперь убедитесь, что вы создали элементы без создания дополнительного элемента DOM.
Необходима дополнительная упаковка (обычно с родителем div ), потому что метод Reacts createElement требует параметра type , который равен either a tag name string (such as 'div' or 'span'), a React component type (a class or a function) . Но это было до того, как они представили React Fragment .
Вот официальный пример: см. React.Fragment.
Вы не сможете избавиться от этого div элемента. React.render () должен вернуть один действительный узел DOM.
Я знаю, что на этот вопрос был дан ответ, вы, конечно, можете использовать React.Fragment, который не создает узел, но позволяет вам группировать такие вещи, как div.
Кроме того, если вы хотите повеселиться, вы можете реализовать (и научиться многим вещам) режим React, который удаляет лишние элементы div, и для этого я действительно хочу поделиться отличным видео о том, как вы можете сделать это на самой базе кода реагирования.
Это, конечно, не то, что вы бы делали на практике, но это хорошая возможность для обучения.
Обновление 2017-12-05. React v16.2.0 теперь полностью поддерживает рендеринг фрагментов с улучшенной поддержкой возврата нескольких дочерних элементов из метода рендеринга компонентов без указания ключей в дочерних элементах:
Если вы используете версию React до v16.2.0, вместо этого можно использовать . :
Исходный:
В настоящее время для каждого элемента требуется ключ, чтобы избежать предупреждения о ключе, но это может быть изменено в будущих выпусках:
В будущем мы, вероятно, добавим специальный синтаксис фрагмента в JSX, который не требует ключей.
Читайте также: