如何基于React / Next js中的函数添加CSS类？

如何解决如何基于React / Next js中的函数添加CSS类？

我正在使用Next js并响应可见性传感器，以便在屏幕上显示div时通知我。

代码种类如下：

import VisibilitySensor from "react-visibility-sensor";


function onChange(isVisible) {
  let colorstate = isVisible ? "test" : "test dark";
  console.log(colorstate)
}

export default function Home() {
  return (
              <VisibilitySensor onChange={onChange}>

                <div className={colorstate}>this is a test div.</div>

              </VisibilitySensor>
);
}

将div className更改为{colorstate}变量无效（返回未定义）。

我对React还是很陌生，我使用“ this.state”方法在线尝试了各种答案，但都没有用。

现在，onChange函数可以正常工作，并在日志中打印正确的类名称，我只是不知道如何将其与div关联。

谢谢。

解决方法

您可以使用useState挂钩，这是初始className为“ test dark”的样子

import VisibilitySensor from "react-visibility-sensor";
import {useState} from 'react'

export default function Home() {
const [colorState,setColorState] = useState('test dark')

const onChange = (isVisible) => {
  isVisible ? setColorState("test") : setColorState("test dark");
}

  return (
              <VisibilitySensor onChange={onChange}>

                <div className={colorState}>this is a test div.</div>

              </VisibilitySensor>
);
}

,

似乎您的colorState变量仅通过onChange可见。

class Home extends React.Component{

    constructor(props){
        super(props);
        this.state = 
        {
            dark: true
        }
        
    }

    test = () => {
        this.setState(
            {
                dark: !this.state.dark
            }
        )
    }

    render(){
        return(
        <div className={this.state.dark ? "dark" : "white"} onClick={this.test}>
            test
        </div>
        );
    }
}

应该工作