我该如何处理React JSX中的长className? [英] How can I deal with a long className in React JSX?
问题描述
假设我正在React JSX中渲染该组件:
Let's say I'm rendering this component in 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).
The classes trigger my JS linter as a line that's too long, and it's very hard to read. How can I separate a long className property in a React component into multiple lines without breaking JSX syntax or triggering a different error in a JS linter? (I'm using ESLint).
推荐答案
另一种Cleaner方法是将className存储在数组中并加入它们.
Another Cleaner method will be to store the classNames in an array and join them.
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>
);
}
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>
);
}
这篇关于我该如何处理React JSX中的长className?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
