Как я могу справиться с длинным className в React JSX?

Скажем, я визуализирую этот компонент в React JSX:

render() {
  return (
    <h1 className="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5">Some text</h1>
  );
}

Классы запускают мой линтер JS как слишком длинную строку, которую очень трудно читать. Как я могу разделить длинное свойство className в компоненте React на несколько строк, не нарушая синтаксис JSX и не вызывая другой ошибки в линтере JS? (Я использую ESLint).


javascript jsx eslint react-jsx
person YPCrumble    schedule 17.04.2016    source источник

Ответы (6)


arrow_upward
7
arrow_downward

Другой метод Cleaner - сохранить имена классов в массиве и присоединиться к ним.

render() { const classNames = ['col-xs-6', 'col-xs-offset-3', 'col-md-4', 'col-md-offset-4', 'col-lg-2', 'col-lg-offset-5'] return ( <h1 className={classNames.join(' ')}>Some text</h1> ); }

person Imamudin Naseem    schedule 25.04.2016

arrow_upward
6
arrow_downward

Обычно я просто объединяю строки в несколько строк и объединяю их. Не забудьте добавить пробелы в конце или начале строк.

Итак, для вашего примера это будет:

render() {
 return (
  <h1 className={
   'col-xs-6 ' +
   'col-xs-offset-3 ' +
   'col-md-4 ' +
   'col-md-offset-4 ' +
   'col-lg-2 ' +
   'col-lg-offset-5'}>Some text</h1>
 );
}

Таким образом, вам также будет проще сканировать, какие имена классов вы установили.

Вот отличный ресурс для некоторых передовых шаблонов кодирования вместе с их соответствующий вариант ESLint или JSCS.

person Leonard Schütz    schedule 17.04.2016
comment
Ваш код не будет работать, поскольку у вас нет пробелов между классами. Вы только что создали одну длинную строку без пробелов. - person Marcel Mandatory; 24.06.2016
comment
Да! Не могу поверить, что не видел этого. Спасибо что подметил это. - person Leonard Schütz; 24.06.2016

arrow_upward
3
arrow_downward

Решение @Imamudin Naseem с некоторыми улучшениями стиля кода

Я бы посоветовал улучшить стиль кода и сохранить classNames напрямую в виде строки

render() {
  const classNames = [
     'col-xs-6',
     'col-xs-offset-3',
     'col-md-4',
     'col-md-offset-4',
     'col-lg-2',
     'col-lg-offset-5'
  ].join(' ')

  return (
    <h1 className={classNames}>
      Some text
    </h1>
  );
}
person Marcel Mandatory    schedule 24.06.2016

arrow_upward
1
arrow_downward

Вы также можете использовать classNames:

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''

Возможно, вы можете определить некоторые из ваших классов как переменные и повторно использовать их.

person Roman Pushkin    schedule 17.04.2016

arrow_upward
1
arrow_downward

Я бы посоветовал, есть ли какая-то логика (определенная на основе некоторых других значений / реквизитов) того, как определяется все имя класса, вы должны использовать classNames npm package.

Однако в вашем случае кажется, что список классов вам уже известен. В таком случае я обычно использую литералы шаблонов Javascript, которые позволяют разбивать строку на несколько строк. Нравится:

render() {
    return (
        <h1 className={`col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4 
            col-lg-2 col-lg-offset-5`}
        >
            Some text
        </h1>
    );
}
person tapananand    schedule 23.06.2018

arrow_upward
0
arrow_downward

Вы можете использовать шаблонные литералы

<div
className={`"card-body align-self-center d-flex flex-column
flex-md-row justify-content-between min-width-zero align-items-md-center"`}
>
person egiray    schedule 24.09.2020