javascript - 我如何处理 React JSX 中的长类名？

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

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