Javascript 如何处理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>
  );
}

render（）{
返回(
一些文本
);
}

---

这些类触发了我的JS linter，因为这行太长了，很难阅读。如何将React组件中的long

className

属性分隔成多行，而不破坏JSX语法或在JS linter中触发不同的错误？（我正在使用ESLint）。

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

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

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

render（）{
返回(
一些文本
);
}

通过这种方式，您可以更轻松地扫描已设置的类名

以下是一些最佳实践编码模式的示例，以及它们各自的ESLint或JSCS选项。

您还可以使用：

---

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

另一种更干净的方法是将类名存储在数组中并将它们连接起来

render（）{
const classNames=['col-xs-6'，
“col-xs-offset-3”，
“col-md-4”，
“col-md-offset-4”，
“col-lg-2”，
‘col-lg-offset-5’]
返回(
一些文本
);
}

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

render（）{
常量类名=[
“col-xs-6”，
“col-xs-offset-3”，
“col-md-4”，
“col-md-offset-4”，
“col-lg-2”，
“col-lg-offset-5”
].加入（“”）
返回(
一些文本
);
}

我建议，如果决定整个类名的方式有一些逻辑（根据其他一些值/道具决定），那么您应该使用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>
    );
}

render（）{
返回(
一些文本
);
}

您可以使用模板文本

<div
className={`"card-body align-self-center d-flex flex-column
flex-md-row justify-content-between min-width-zero align-items-md-center"`}
>

<div
className={`"card-body align-self-center d-flex flex-column
flex-md-row justify-content-between min-width-zero align-items-md-center"`}
>