Javascript 如何在React/Next js中基于函数添加css类？

我正在使用NextJS和react可见性传感器，让我知道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}变量不起作用，将返回未定义

我还没有反应过来，我在网上尝试了各种各样的答案，使用这个。state方法，但都不起作用

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

---

谢谢。

似乎只有通过onChange才能看到您的colorState变量

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

---

应该工作

似乎只有通过onChange才能看到colorState变量

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

---

如果可以工作

您可以使用useState钩子，这就是初始类名为“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>
);
}

---

您可以使用useState钩子，这是初始类名为“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>
);
}

---

谢谢你的回答！不幸的是，这不起作用，并且将console.log更改为新的变量状态。如果我将初始状态设置为light或dark，则会传递给div。但是，当onChange函数运行时，唯一发生的事情是控制台记录新状态，但不会将其传输到div的类名：如果将组件定义为ECMA6类，则此样式将起作用。更新了答案谢谢你的回答！不幸的是，这不起作用，并且将console.log更改为新的变量状态。如果我将初始状态设置为light或dark，则会传递给div。但是，当onChange函数运行时，唯一发生的事情是控制台记录新状态，但不会将其传输到div的类名：如果将组件定义为ECMA6类，则此样式将起作用。更新了答案