如何处理 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 linter 的行太长，而且很难阅读。怎样才能分开长className将 React 组件中的属性分成多行而不破坏 JSX 语法或在 JS linter 中触发不同的错误？ （我正在使用 ESLint）。

另一种 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> ); }