如何在React JSX中处理long className？

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

Answer 1

另一种 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 2

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

所以对于你的例子,它将是:

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

通过这种方式,您可以更轻松地扫描已设置的classNames.

对于一些最佳实践编码模式,以及它们各自的ESLint或JSCS选项,这是一个很好的资源.