我如何处理 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

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

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

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

你也可以使用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 3

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

Answer 4

@Imamudin Naseem 解决方案，改进了一些代码风格

我建议改进代码风格，将类名直接保存为字符串

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 5

我建议如果有一些逻辑（根据其他 values/props 决定）如何决定整个 classname 你应该使用 classNames npm 包。

但是，在您的情况下，您似乎已经知道 class 列表。在这种情况下，我倾向于使用 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"`}
>

Answer 7

使用反斜杠

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

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

How can I deal with a long className in React JSX?

javascript

jsx

eslint

react-jsx