Question

假设我在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 linter作为一条太长的行，而且很难阅读。如何在不破坏JSX语法或在JS linter中触发不同错误的情况下将React组件中的长className属性分成多行？（我正在使用ESLint）。

Answer 1

我通常只是将字符串包装成多行并连接它们。不要忘记在字符串的末尾或开头添加空格。

因此，对于您的示例，它将是：

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>
 );
}

通过这种方式，您可以更轻松地扫描已设置的类名。

这里有一些great resource用于一些最佳实践编码模式，以及它们各自的ESLint或JSCS选项。

Answer 2

另一个Cleaner方法是将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'] return ( <h1 className={classNames.join(' ')}>Some text</h1> ); }

Answer 3

@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>
  );
}

Answer 4

您还可以使用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 }); // => ''

也许您可以将某些类定义为变量，然后重复使用它。

Answer 5

我建议是否有某种逻辑（基于其他一些值/属性来决定）整个类名的确定方式，您应该使用classNames npm软件包。

但是，对于您而言，您似乎已经知道班级列表。在这种情况下，我倾向于使用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>
    );
}

Answer 6

您可以使用模板文字

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

如何在React JSX中处理long className？

6 个答案: