javascript - 如何更改列表元素的类名

Question

我有一个组件，即项目列表。

render() {
    const { clickHandler } = this.props;
return (
    <section className="container birds-list">
        <ul className="birds-list__list">
            {this.props.list.map(({name, id}) => (
                <li key={id} className="birds-list__item">
                    <div className="shape shape-default"></div>
                    <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
                </li>
            )
            )}
        </ul>
    </section>

在 clickHandler 函数中，我使用形状类名称更改 div 的背景颜色，例如 e.target.previousSibling.classList.add('shape-complete');

但是当我想用新名称重新渲染我的组件时，我想用“shape shape-default”更改所有具有默认类名称的 div 元素，而不是我添加了带有类的 div 元素 ('shape shape -默认形状完整')

Answer 1

您已在 React 之外更改了 DOM。相反，您应该在“Reactland”中控制您的类名。实现此目的的一种方法是维护应用了类名的“选定”或“单击”元素状态的 map 或某些数据结构(类似于被选中的复选框)。

state = {
  clicked: {},
};

const clickHandler = id => this.setState(prevState => {
  const newClicked = {...prevState.clicked};
  newClicked[id] = !newClicked[id];
  return newClicked;
});

render() {
  ...
  this.props.list.map(({name, id}) => {
    const classNames = ['shape shape-default'];
    if (this.state.checked[id] classNames.push('shape-complete');

    return (
      <li key={id} className="birds-list__item">
        <div className={classNames.join(' ')}></div>
        <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
      </li>
    )
  })
  ...

使用classnames npm 包可以稍微简化这一点

import classNames from 'classnames';
...

state = {
  clicked: {},
};

const clickHandler = id => this.setState(prevState => {
  const newClicked = {...prevState.clicked};
  newClicked[id] = !newClicked[id];
  return newClicked;
});

render() {
  ...
  this.props.list.map(({name, id}) => {
    const classnames = classNames(
      'shape',
      'shape-default',
      {
        'shape-complete': this.state.checked[id],
      },
    );

    return (
      <li key={id} className="birds-list__item">
        <div className={classnames}></div>
        <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
      </li>
    )
  })
  ...