React-有条件地在 div 中应用 css 但它不起作用

Posted 2023-02-21

【中文标题】React-有条件地在 div 中应用 css 但它不起作用

【英文标题】：React- Conditionally applying css in div but it does not work

【发布时间】：2021-10-22 01:20:16

【问题描述】：

查看了其他示例并尝试做同样的事情，但不确定为什么我的代码不起作用。我有循环遍历一些键并呈现 div 的代码。我想根据键是偶数还是奇数有条件地应用一些样式。示例：

<div className=parseInt(key) % 2 === 0  ? 'label1' : 'label2' >
     <span style= marginLeft: "10px" >key:00</span>
</div>
           

样式可以在同一个文件中访问，看起来像：

# Material UI 
const useStyles = makeStyles((theme) => (
  label1: 
    width: "50px",
    height: "16px",
    top: "458px",
    background: "yellow",
    fontSize: "12px",
  ,
  label2: 
    width: "50px",
    height: "16px",
    top: "458px",
    background: "red",
    fontSize: "12px",
  , 
));

我做错了什么？目前没有样式被应用到 div

【问题讨论】：

DOM 中的类是否相应切换？

目前没有样式被应用到上面的代码中。代码

parseInt(key) % 2 === 0 ? 'label1' : 'label2' > key:00 你能试试这个吗.在 className 中的 之后添加波浪号并在 之前关闭波浪号

【参考方案1】：

您需要使用材料 ui useStyles 钩子中的类。

const classes = useStyles()

....

<div className=parseInt(key) % 2 === 0  ? classes.label1 : classes.label2 >
     <span style= marginLeft: "10px" >key:00</span>
</div>

检查useStyles钩子api：https://material-ui.com/styles/basics/

如果你有一个类组件并且你可以使用钩子，那么你可以使用withStyles 高阶组件来实现，就像这个例子：

import  withStyles  from "@material-ui/core/styles"

const styles = theme => (
  label1: 
    backgroundColor: "red",
  ,
  label2: 
    backgroundColor: "red",
  ,
)

class ClassComponent extends Component 
  state = 
    searchNodes: "",
  

  render() 
    const  classes  = this.props
    return (
      <div className=parseInt(key) % 2 === 0 ? classes.label1 : classes.label2>
        <span style= marginLeft: "10px" >key:00</span>
      </div>
    )
  


export default withStyles(styles,  withTheme: true )(ClassComponent)

【讨论】：

如果它不是一个功能组件，而是一个类怎么办

这行得通！冒犯者是类名周围的“ ”。谢谢您的帮助！ @康斯坦丁

不仅仅是字符串，类作为属性添加到对象中，因此您可以通过从useStyles 或@987654329 创建的对象中获取label1 属性来获取类名@。很高兴我能帮上忙！

是的，你是对的，忘了提到我之前尝试过类似'classes.label1'的东西，但没有奏效。删除 ' ' 就成功了！