反应可见 + 添加 class

Question

有效：

var onChange = function (isVisible) {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    if(isVisible = 'visible'){
        //here I need add class
    }
};

并且 VisibilitySensor 在内部组件 Needs in div className =Need.

<VisibilitySensor onChange={onChange}/>

代码运行良好，渲染后我可以看到 console.log。所以。我的问题是什么。

我不想添加 class 动画 fadeInUp。 if isVisible = 'visible'

如何将此 class 添加到需要 className React？

如果有帮助，这里是所有代码：

https://pastebin.com/bnTKbXC4

Answer 1

不知道你是不是在管理状态。但看起来这是有状态的组件，那为什么不呢。

// just below this line -  class Needs extends React.Component 
state = {
    NeedsBrother: false // setting this variable to false initially
}

然后

var onChange = function (isVisible) {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    if(isVisible = 'visible'){
        this.setState(prevState => {
            NeedsBrother: true
        })
    }
};

并在您的渲染函数中

<div className={`Need ${this.state.NeedsBrother}`}>

Answer 2

您是否将 NeedsBrother 声明为状态变量。

this.state={NeedsBrother:false}

Answer 3

这是对您的代码的重构，我不确定它是否会起作用。

class Needs extends React.Component{


    constructor(props)
    {
        super(props);
        this.state = {
            Need: 'Need'
            };

        this.onChange = this.onChange.bind(this);
    }

    onChange(isVisible)
    {
        console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
        if(isVisible = 'visible')
        {
            this.setState( {Need : 'Need ' + ' animated fadeIn' } );
        }
        else
        {
            this.setState( {Need : 'Need ' } );
        }
    }

    render()
    {
        var VisibilitySensor = require('react-visibility-sensor');

        return(
            <div className ={this.state.Need}>

                <VisibilitySensor onChange={this.onChange}/>

                <div className ="Section_Text">
                    <h1>Solutions tailored to your needs</h1>
                    <p><b>Creating experience in real & digital world.</b></p>
                    <p>
                        Cooperation with a lot of designers, photographers,
                        programmist & specialists from various field allows
                        to create effective solutions for your business goals.</p>
                </div>

                <img src={bulb} />
            </div>
        )
    }
}

反应可见 + 添加 class

React Visible + Add class

class

add

reactjs