Question

那么在反应中使用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')
);

甚至只是在课程名称栏目中列出？

Answer 1

这取决于你的组件应该/将要做什么。

如果你的组件是相当静态的，你会想要像第一个例子那样使用内置样式：

const mystyle = {
width: '100%',
...
}

<div style={mystyle}>...</div>

但是，有更好的方法可以让你的组件更加动态地重复使用，例如使用类方法从传递给它的props生成样式，就像在这个渲染函数中一样：

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

遵循此逻辑，您可以使用三元运算符根据props更改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>);
}

设置组件样式的另一种常见但复杂的方法是使用一个返回给定样式对象的函数，并像第一个示例一样使用它。

最终，您应该决定是否希望设计师/用户对您的组件进行样式设置，或者无论在何处使用它都应该看起来相同......如果它由设计师设计，只需公开CSS类名称从props到组件或定义默认值：

<div className={this.props.className || 'someclassName'}>...</div>

否则，请使用上面的示例。

Answer 2

是的，你可以这样做！看一下下面的代码：

＆＃13;

class Example extends React.Component {
  cssClasses = 'demo demo2';
  render() {
    return ( 
       <div className = { this.cssClasses }>
           Hello World 
       </div>
    );
  }
}

ReactDOM.render( <Example/> , document.getElementById('app'));

＆＃13;

.demo {
  color: blue
}

.demo2 {
  font-size: 20px;
}

＆＃13;

<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>

＆＃13;

您的错误是homeClasses的定义。你不能声明它像

const homeClasses = '...';

因为在您的方式上，homeClasses是您组件的属性。你不应该使用const。只是：

homeClasses = '...';

您忘记使用this引用，因为homeClasses是您的组件的属性。

<div className={this.homeClasses}>
   <h1>SUP</h1>
</div>

Answer 3

此问题存在且有一个问题。您可以从文件（示例data.json）中使用和读取此数据，其中可以使用此数据，如道具。

在反应中使用className

3 个答案: