Почему React-Bootstrap дублирует пользовательские имена классов в элементе?
Я использую React-Bootstrap, и я применяю некоторые пользовательские классы к компоненту с помощью bsClass: Пример:
<Button bsClass = "exit action">Exit</Button>
Визуализированный HTML-код:
<button type = "button" class = "exit action exit action-default">Exit the Exam</button>
Почему повторяются имена классов (выход и действие)?
Спасибо и приятно знать. Я только начал с React и React-Bootstrap, поэтому я пытался углубить свое понимание, но это меня озадачило.
Ответы 1
Из документации React-Bootstrap для компонента кнопки, https://react-bootstrap.github.io/components/buttons/,
bsClass:String - Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
Итак, bsClass - это просто базовый класс, который добавляется к кнопке, и префикс для фактического класса стиля, чтобы сопоставить стандарты начальной загрузки.
<Button>Default</Button>
генерирует
<button type = "button" class = "btn btn-default">Default</button>
и, следовательно
<Button bsStyle = "primary" bsClass = "custom">Default</Button>
будет генерировать
<button type = "button" class = "custom custom-primary">Default</button>
и в вашем случае, по соглашению, -default получил префикс со строкой, которую вы предоставили exit action, и она стала exit action-default.
: Либо у вас есть структура CSS, чтобы сохранить этот стандарт, либо, в идеале, рекомендуется использовать bootstrapUtils для создания пользовательских стилей. https://react-bootstrap.github.io/utilities/custom-styles/
Похоже на ошибку в react-bootstrap (мне удалось легко воспроизвести)