Reactjs 如何摆脱""；“类名”；JSX中的属性？

我的JSX文件充满了：

<div className="...">...</div>

。。。

例如：

const Page = () => (

  <div className="Page">

    <div className="sideMenu">
      <Route path="/" component={SidemenuMainCont} />
    </div>

    <div className="mainColumn">
      <div className="header">
        <Header />
      </div>
      <div className="section">
        <Route path="/" component={TenCont} />
      </div>
      <div className="footer">
        <Footer />
      </div>
    </div>

    <AuthLoginModalCont />

  </div>

);

const Page=（）=>(
);

由于这个原因，这个代码看起来是有线的。“className”对于重复使用的属性来说太长。有没有常见的方法来消除这种讨厌的重复？还是缩短

我可以制作如下自定义组件：

<Div cl="...">...</Div>

    class Div extends React.Component {
        render() {
            return (
                <div className={this.props.cl} >
                    {this.props.children}
                </div>
            );
        }
    };
    export default Div;

。。。

但我感兴趣的是，这是否有一个共同的做法。可能已经有了className属性的别名？或者以其他方式设置CSS类名

更新

谢谢Przemysław Zalewski提出了一个有趣的想法。但实际上我使用的是CSS模块。所以我的代码是：

import S from "./_.scss";
...
<div className={S.Page}>...</div>

从“/..scss”导入S；
...
...

而且它不起作用：

<Styled {S.Page}>...</Styled>

。。。

您可以这样做：

<Div cl="...">...</Div>

    class Div extends React.Component {
        render() {
            return (
                <div className={this.props.cl} >
                    {this.props.children}
                </div>
            );
        }
    };
    export default Div;

class Div扩展了React.Component{
render（）{
返回(
{this.props.children}
);
}
};
导出默认Div；

和使用

<Div cl="my_class"></Div>

---

您可以这样做：

<Div cl="...">...</Div>

    class Div extends React.Component {
        render() {
            return (
                <div className={this.props.cl} >
                    {this.props.children}
                </div>
            );
        }
    };
    export default Div;

class Div扩展了React.Component{
render（）{
返回(
{this.props.children}
);
}
};
导出默认Div；

和使用

<Div cl="my_class"></Div>

< />代码> 您应该考虑使用一个简单的<代码>样式组件，用于将所有真正的布尔属性作为类名处理，并使用字符串将它们连接为字符串。

类样式扩展了React.PureComponent{
render（）{
const{children，tag:tag='div'，…rest}=this.props；
常量[booleans，others]=分区（x=>x==true）（其余）
返回(
{儿童}
)
}
}
常量页=（）=>(
使用<代码>代理> /代码>对象。但是，它将在旧的JS引擎上崩溃，因为它不能完全填充，但允许编写“代码> <代码>，而不必事先声明主页，并且更容易调试，因为全名被保留。
 < P>您应该考虑使用一个简单的<代码>样式< /Cult>组件，用于这种情况将所有true boolean属性作为类名处理，并使用将它们作为字符串联接

类样式扩展了React.PureComponent{
render（）{
const{children，tag:tag='div'，…rest}=this.props；
常量[booleans，others]=分区（x=>x==true）（其余）
返回(
{儿童}
)
}
}
常量页=（）=>(
使用
代理
对象。但是，它将在旧的JS引擎上中断，因为它不能完全填充，但允许在不事先声明main列的情况下编写
，并且由于保留了全名，它更容易调试。
您可以为它编写一个Babel插件-例如，允许您使用
类
在React中使用JSX时，为属性设置
，并在传输JSX时将其更改为
className
和
htmlFor
属性（JSX属性是对象文本的语法糖）

以下是Babel 6插件的完整源代码，该插件在传输时将
cl
属性更改为
className
：

var TRANSLATIONS = {
  'cl': 'className'
}

module.exports = function() {
  return {
    visitor: {
      JSXAttribute: function(node) {
        if (node.node.name.name in TRANSLATIONS) {
          node.node.name.name = TRANSLATIONS[node.node.name.name]
        }
      }
    }
  }
}


我的实际建议是坚持使用
className
，你会习惯的：）
你可以为它编写一个Babel插件-例如，允许你在React中使用JSX时使用
class
和
属性，并将它们更改为
className
和
htmlFor
属性（JSX属性是对象文本的语法糖）传输JSX时需要React

以下是Babel 6插件的完整源代码，该插件在传输时将
cl
属性更改为
className
：

var TRANSLATIONS = {
  'cl': 'className'
}

module.exports = function() {
  return {
    visitor: {
      JSXAttribute: function(node) {
        if (node.node.name.name in TRANSLATIONS) {
          node.node.name.name = TRANSLATIONS[node.node.name.name]
        }
      }
    }
  }
}


我的实际建议是坚持使用
className
，你会习惯的：）
为什么他们一开始不把这个写进JSX transpiler…为什么他们一开始不把这个写进JSX transpiler。。。