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

【问题标题】：How can I deal with a long className in React JSX?如何处理 React JSX 中的长类名？
【发布时间】：2016-08-09 06:01:49
【问题描述】：

假设我在 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）。

【问题讨论】：

标签： javascript react-jsx eslint jsx

【解决方案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> ); }

【讨论】：

【解决方案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>
 );
}

这样你也更容易扫描你设置的类名。

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

【讨论】：

您的代码将无法工作，因为您的类之间没有空格。您刚刚创建了一个没有空格的长字符串。
是的！我不敢相信我没有看到。感谢您指出这一点。

【解决方案3】：

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

【讨论】：

【解决方案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 }); // => ''

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

【讨论】：

【解决方案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>
    );
}

【讨论】：

【解决方案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"`}
>

【讨论】：

模板文字中不需要引号，因为模板文字已经是一个字符串。事实上，这可能会破坏课程。