Question

我正在使用react来构建列表应用程序，我想根据不同的事件添加css类。我想我可以根据向组件传递不同的道具轻松添加/删除类。列表项从商店发送，并在容器中处理，并且在组件中完成将不同道具转换为css类。

目前我创建了容器中所有项目的数组，如下所示：

this.state = {
    items: this.props.items.map(function(item){
        return <ItemWrapper><item/></ItemWrapper>
    })
}

然后，在ItemWrapper中，例如：

(if this.props.isActive) {
    return <li className='active'>{this.props.children}</li>
}

因此，每当我想将'active'类添加到项目中时，我就会在其上设置“isActive”道具。

但是因为所有项目都保存在容器状态的数组中，所以每次我想要更改“isActive”道具时都要创建数组的副本，所以显然不是一个很好的解决方案，特别是当列表增长时。

我曾想过在状态下将每个项保存在自己的键下，但是如果我想通过计时事件添加类 - 比如在一个元素中添加一个类并在每个设置的时间段从另一个元素中删除它 - 它变得困难。

管理这些课程变更的最有效方法是什么？

Answer 1

您可以使用三元运算符轻松完成此操作：

<li className={this.props.isActive ? 'isActive' : ''}>{this.props.children}</li>

Answer 2

我认为你不得不在你的状态中存储组件，只需存储一组对象和活动索引，这就是我的做法：

父组件状态：

this.state.children.map( (child, i) => {
        const active = ( i == this.state.active )
        return <Child key={i} active={active}>{child.name}</Child>
    }
})

在父组件的render方法中：

const Child = (props) => { 
    const active = props.active ? 'active' : '';
    return <div className={active}>{props.children}</div>
}

子组件：

this.state = ...

似乎您正在使用Redux商店，在这种情况下，请避免使用this.setState()和connect，而是使用父组件中react-redux的{{1}} mapStateToProps函数。

如果有帮助，请告诉我。

Answer 3

您可以使用classNames包。这是一个简单的javascript实用程序，可以有条件地将classNames连接在一起。

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

真实世界的例子：

/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';

let cx = classNames.bind(styles);

export default class SubmitButton extends Component {
  render () {
    let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
    let className = cx({
      base: true,
      inProgress: this.props.store.submissionInProgress,
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    });
    return <button className={className}>{text}</button>;
  }
};

ReactJS基于props设置css类

3 个答案: