在react中使用className
在react中使用className
提问于 2018-06-11 08:25:50
那么在react中使用className的最佳实践是什么呢？在特定的多个类名中。我正在通读文档，但我真的没有得到明确的答案。我见过这样的事情：
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}但是有没有办法让我做这样的事情呢？
import React from 'react';
import ReactDOM from 'react-dom';
import './css/landing.css';
import './css/w3.css';
class Home extends React.Component {
const homeClasses = 'bgimg-1 w3-display-container w3-opacity-min';
render() {
return (
<div className={homeClasses}>
<h1>SUP</h1>
</div>
);
}
}
ReactDOM.render(
<Home />,
document.getElementById('root')
);或者甚至只是在类名称部分列出然后列出？
回答 3
Stack Overflow用户
发布于 2018-06-11 08:50:21
是的，你可以做到的！看一下下面的代码片段：
class Example extends React.Component {
cssClasses = 'demo demo2';
render() {
return (
<div className = { this.cssClasses }>
Hello World
</div>
);
}
}
ReactDOM.render( <Example/> , document.getElementById('app'));.demo {
color: blue
}
.demo2 {
font-size: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>
您的错误是homeClasses的定义。你不能这样声明它
const homeClasses = '...';因为，在您这样做的过程中，homeClasses是组件的属性。您不应该使用const。只要：
homeClasses = '...';而且您忘记了使用this引用，因为homeClasses是组件的一个属性。
<div className={this.homeClasses}>
<h1>SUP</h1>
</div>Stack Overflow用户
发布于 2018-06-11 09:01:34
这取决于你的组件应该/将要做什么。
如果您的组件是相当静态的，那么您将希望使用像第一个示例一样的内置样式：
const mystyle = {
width: '100%',
...
}
<div style={mystyle}>...</div>但是，有一些更好的方法可以让组件更动态地重用，例如，使用类方法从传递给它的属性生成样式，就像在下面的呈现函数中一样：
render() {
// User's preference or Default Style:
const defaultStyle = {
width: this.props.style.width || '100%',
height: this.props.style.height || '100%',
}
//if this.props.className doesn't exist use mycssclass
const defaultClassName = this.props.className || 'mycssclass'
return (
<div className={defaultClassName} style={defaultStyle}>...</div> )按照这个逻辑，您可以使用三元运算符来根据属性更改css类名。一种常见的解决方案是使用isActive状态属性，并使用它来确定应该使用哪个类。
render() {
const activeClassName = this.props.className + ' mycomponent-active'
return (
<div className={this.props.isActive ? activeClassName : this.props.className} style={ this.props.style }
</div>);
}设置组件样式的另一种常见但复杂的方法是使用将返回给定样式对象的函数，并像第一个示例一样使用它。
最终，您应该决定是否希望您的组件由设计者/用户设计样式，或者无论在哪里使用它看起来都是一样的……如果它是由设计器设计的，只需将来自props的CSS类名公开给组件，或者定义一个默认值：
<div className={this.props.className || 'someclassName'}>...</div>否则，请使用上面的示例。
Stack Overflow用户
发布于 2018-06-11 22:05:58
存在并解决此问题的一个方法。您可以从文件(例如data.json)中使用和读取此数据，其中可以像使用道具一样使用此数据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50789198
复制相关文章
相似问题