问题描述
假设我正在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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!