Javascript 如何在react中设置条件类？

我试图用Reactjs来理解条件变量。例如，使用纯HTML和jQuery，我的代码看起来就是这样

HTML:

CSS:

我很难理解如何使用Reactjs有条件地设置类。我最好的猜测是这样的：

JavaScript

runcheck:function(){
if ( document.getElementById('dabox').value == 0 ){
var depends = "aclass error";
}
},

render:function(){
var depends = "aclass";
return (
<p className={depends}>Error</p>
<input onClick="runcheck()" type="submit"/>
)
}

runcheck:function（）{
if（document.getElementById（'dabox'）。值==0）{
var dependens=“aclass error”；
}
},
render:function（）{
var=“aclass”；
返回(
错误
)
}

---

当然，代码不起作用。如何使用React JS有条件地设置这些变量？

您的示例说明了使用React时需要的一些基本心态变化。它们不难掌握，首先请看：

下面是一些代码：

import React from 'react';

export default React.createClass({
    /**
     * Component's current (internal) state
     */
    getInitialState() {
        return {
            text: '' // initial value for text input
        };
    },

    /**
     * Renders virtual DOM according to component's current state
     */
    render() {
        const showError = this.state.text == '';

        return <div>
            { showError
                    ? <p className='error'>Error</p>
                    : null
            }

            <input type='text' value={this.state.text} onChange={this.onChange} />
            <input type='button' onClick={this.onClick} value='Ship It' />
        </div>
    },

    /**
     * Every time the textbox is changed, this handler is called.
     * It simply updates the component's state
     */
    onChange(ev) {
        // State changes cause render to be re-evaluated and your DOM will be updated accordingly.
        this.setState({ text: ev.target.value });
    },

    /**
     * When the button is clicked, this handler is called
     */
    onClick() {
        // ...
    }
});

从“React”导入React；
导出默认的React.createClass({
/**
*组件的当前（内部）状态
*/
getInitialState（）{
返回{
文本：“”//文本输入的初始值
};
},
/**
*根据组件的当前状态呈现虚拟DOM
*/
render（）{
const-showError=this.state.text==''；
返回
{淋浴器
？
错误
：null
}
},
/**
*每次更改文本框时，都会调用此处理程序。
*它只是更新组件的状态
*/
onChange（电动汽车）{
//状态更改会导致重新评估渲染，并相应地更新DOM。
this.setState（{text:ev.target.value}）；
},
/**
*单击按钮时，将调用此处理程序
*/
onClick（）{
// ...
}
});

您的示例说明了在使用React时所需的一些基本心态变化。它们不难掌握，首先请看：

下面是一些代码：

import React from 'react';

export default React.createClass({
    /**
     * Component's current (internal) state
     */
    getInitialState() {
        return {
            text: '' // initial value for text input
        };
    },

    /**
     * Renders virtual DOM according to component's current state
     */
    render() {
        const showError = this.state.text == '';

        return <div>
            { showError
                    ? <p className='error'>Error</p>
                    : null
            }

            <input type='text' value={this.state.text} onChange={this.onChange} />
            <input type='button' onClick={this.onClick} value='Ship It' />
        </div>
    },

    /**
     * Every time the textbox is changed, this handler is called.
     * It simply updates the component's state
     */
    onChange(ev) {
        // State changes cause render to be re-evaluated and your DOM will be updated accordingly.
        this.setState({ text: ev.target.value });
    },

    /**
     * When the button is clicked, this handler is called
     */
    onClick() {
        // ...
    }
});

从“React”导入React；
导出默认的React.createClass({
/**
*组件的当前（内部）状态
*/
getInitialState（）{
返回{
文本：“”//文本输入的初始值
};
},
/**
*根据组件的当前状态呈现虚拟DOM
*/
render（）{
const-showError=this.state.text==''；
返回
{淋浴器
？
错误
：null
}
},
/**
*每次更改文本框时，都会调用此处理程序。
*它只是更新组件的状态
*/
onChange（电动汽车）{
//状态更改会导致重新评估渲染，并相应地更新DOM。
this.setState（{text:ev.target.value}）；
},
/**
*单击按钮时，将调用此处理程序
*/
onClick（）{
// ...
}
});

忘记DOM，使用javascript，你的应用程序状态是真实的来源认真地说，你应该看一些关于React的视频，它是如何工作的，以及为什么你的语法是错误的。花上几个小时，深入研究React，这需要一些时间，但之后，你将至少了解数据驱动UI*的基本工作原理，还有很多需要发现的地方，比如redux等等。忘记DOM，使用javascript，你的应用程序状态是真实的来源认真地说，你应该看一些关于React的视频，它的工作原理以及语法错误的原因。花上几个小时深入研究React，这需要一些时间，但之后，您将至少了解数据驱动UI*的基本工作原理，还有很多需要发现的地方，比如redux等等。。

runcheck:function(){
if ( document.getElementById('dabox').value == 0 ){
var depends = "aclass error";
}
},

render:function(){
var depends = "aclass";
return (
<p className={depends}>Error</p>
<input onClick="runcheck()" type="submit"/>
)
}

import React from 'react';

export default React.createClass({
    /**
     * Component's current (internal) state
     */
    getInitialState() {
        return {
            text: '' // initial value for text input
        };
    },

    /**
     * Renders virtual DOM according to component's current state
     */
    render() {
        const showError = this.state.text == '';

        return <div>
            { showError
                    ? <p className='error'>Error</p>
                    : null
            }

            <input type='text' value={this.state.text} onChange={this.onChange} />
            <input type='button' onClick={this.onClick} value='Ship It' />
        </div>
    },

    /**
     * Every time the textbox is changed, this handler is called.
     * It simply updates the component's state
     */
    onChange(ev) {
        // State changes cause render to be re-evaluated and your DOM will be updated accordingly.
        this.setState({ text: ev.target.value });
    },

    /**
     * When the button is clicked, this handler is called
     */
    onClick() {
        // ...
    }
});