如何在 React / Next js 中基于 function 添加 css class？

Question

I'm using Next js and react visibility sensor to let me know when a div is visible on screen.

Code kinda looks like:

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

Changing the div className to the {colorstate} variable doesn't work (returns undefined).

I'm fairly new to React and I tried various answers online using "this.state" methods which all didn't work.

Right now the onChange function works fine and prints the correct class name in the log, I just don't know how to associate it with the div.

Thanks.

Answer 1

You can use useState hook, this is how it would look like with initial className of '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>
);
}

Answer 2

seems your colorState variable is visible only through the 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>
        );
    }
}

should work