他のクラスを削除せずにReactに条件付きクラスを追加するにはどうすればよいですか？

Question

最初のレンダリング時にプラグインを介して適用されるクラスを維持しながら、状態オブジェクトの真実性に基づいて条件付きで要素にクラス名を追加したいと考えています。

動作しない例：同上

import React from 'react'; 
import classnames from 'classnames'; 

export default class CoolThing extends React.Component{ 
    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    // This plugin sets classes to the this.refs.root DOM element when it initializes 
    $(this.refs.root).jqueryPluginIHaveToUseThatSetsClassesAndDoesStuff(); 
    } 

    handleClick =() => { 
    this.setState({ 
     active: true 
    }) 
    } 

    render() { 
    const classNames = classnames({ 
     active: this.state.active 
    }); 

    return (
     <div ref="root" className={ classnames } onClick={ this.handleClick }></div> 
    ) 
    } 
} 

が、これはまた、レンダリングでは失敗します。

render() { 
    return (
    <div ref="root" className={ this.state.active ? "CoolThing active" : "CoolThing" } onClick={ this.handleClick }></div> 
) 
} 

所望の結果は "CoolThing" クラスを持っているでしょうjqueryPluginIHaveToUseThatSetsClassesAndDoesStuffが適用されたクラスに加えて、常にこの例のdivタグに適用されます。ユーザーの操作によっては、activeクラスも適用され、以前に適用されたクラスは上書きされません。

私は避けたい：

• をactiveクラスまたは類似かかり、ネストされたdiv要素を追加することthis.refs.root参照
• 経由でjQueryのaddClassを使用して...構造はそのまま残るthemarkup持つことはかなり重要です

Answer 1

私は、デフォルトでCoolThingにclassNameを設定してから、レンダリング機能でstate.activeをチェックします。追加する他のクラスがあり、それらを永続化したい場合は、それらを状態に格納してから、それらを文字列テンプレートにも追加します。これにより、状態値がまだ設定されていなくても、CoolThingをデフォルトのクラスにすることができます。

render() { 

    let jQueryClasses = this.state.jQueryClasses; 
    let active = { this.state.active ? " active": ""}; 
    return (
     <div ref="root" className={`CoolThing${jQueryClasses}${active}`} 
         onClick={ this.handleClick }/>); 
} 

Answer 2

あなただけjqueryのは、それらをsetted後（そうcomponentDidMountで）CLASSLISTを取得し、コンポーネントの状態にそれらをプッシュしていないのはなぜこの

render() { 
    return (
    {this.state.active ? <div ref="root" className="CoolThing active" 
    onClick`enter code here`={ this.handleClick }></div> 
    : <div ref="root" className="CoolThing" 
    onClick={ this.handleClick }></div> 
) 
}