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

期望的结果将是＆＃34; CoolThing＆＃34;除了jqueryPluginIHaveToUseThatSetsClassesAndDoesStuff应用的任何类之外，class始终在此示例的div标签上。那么，根据用户的操作，active类也将被应用，而不会覆盖任何以前应用的类。

我想避免：

通过this.refs.root引用
添加一个带有active类或类似内容的嵌套div ......标记结构保持不变是非常重要的

Answer 1

我默认将className设置为CoolThing，然后在render函数中检查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

试试这个

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

如何在React中添加条件类而不删除其他类？

2 个答案: