第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在 React / Next js 中添加基于函數(shù)的 css 類?

如何在 React / Next js 中添加基于函數(shù)的 css 類?

慕容3067478 2022-12-29 14:00:27
我正在使用 Next js 和反應(yīng)可見性傳感器來讓我知道 div 何時(shí)在屏幕上可見。代碼有點(diǎn)像: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”方法在線嘗試了各種答案,但都沒有用?,F(xiàn)在 onChange 函數(shù)工作正常并在日志中打印正確的類名,我只是不知道如何將它與 div 相關(guān)聯(lián)。謝謝。
查看完整描述

2 回答

?
慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

您可以使用 useState 掛鉤,這就是初始 className 為“test dark”時(shí)的樣子


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>

);

}


查看完整回答
反對(duì) 回復(fù) 2022-12-29
?
MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊

似乎您的 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>

        );

    }

}

應(yīng)該管用


查看完整回答
反對(duì) 回復(fù) 2022-12-29
  • 2 回答
  • 0 關(guān)注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)