React JS：如何根据另一个元素的className bgcolor样式更改一组div中div的bgcolor答案

【问题标题】：React JS: how to change the bgcolor of a div in a group of divs based on another element's className bgcolor styleReact JS：如何根据另一个元素的className bgcolor样式更改一组div中div的bgcolor
【发布时间】：2020-05-19 21:52:30
【问题描述】：

设置： 我已经动态生成了两组独立的 div。第一组 div 代表 4 种不同的 bgcolor 样式 [名为 ArticlePreview]，第二组代表最终网格结构 [名为 ArticleCells] 中的 4 个部分单元格示例。

想要的结果： 当用户点击其中一篇文章来选择它时，用户应该能够点击一个或多个单元格并应用与所选文章相同的 bgcolor 样式，如果没有选择文章，则默认bgcolor 适用于文章和单元格元素。

沙盒： code sample

代码示例：

const ArticlePreview = props => {
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.article}
    </div>
  );
};

const ArticleCells = props => {
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.cell}
    </div>
  );
};
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: false,
      article: "",
      cell: "",
      class: ""
    };
  }

  onSelectArticle = article => {
    this.setState({
      selected: true,
      article: article
    });
  };

  onSelectCell = cell => {

    var style = (cell.currentTarget.style.backgroundColor =
      this.state.selected && this.state.cell === cell ? "bkcolor" : "default");
    this.setState({
      selected: true,
      cell: cell,
      class: { style }
    });
  };

  render() {
    let articles = ["Article 1", "Article 2", "Article 3", "Article 4"];
    let cells = ["Div 1", "Div 2", "Div 3", "Div 4"];

    return (
      <div>
        <div>
          {articles.map((article, index) => (
            <ArticlePreview
              key={index}
              class={
                this.state.selected &&
                this.state.article === article &&
                this.state.article === articles[0]
                  ? "bkcolorGreen"
                  : this.state.selected &&
                    this.state.article === article &&
                    this.state.article === articles[1]
                  ? "bkcolorBlue"
                  : this.state.selected &&
                    this.state.article === article &&
                    this.state.article === articles[2]
                  ? "bkcolorOrange"
                  : this.state.selected &&
                    this.state.article === article &&
                    this.state.article === articles[3]
                  ? "bkcolorYellow"
                  : "default"
              }
              onClick={() => this.onSelectArticle(article)}
              article={article}
            />
          ))}
        </div>
        <br />
        <div>
          {cells.map((cell, index) => (
            <ArticleCells
              key={index}
              class={this.state.class}
              onClick={cell => this.onSelectCell(cell)}
              cell={cell}
            />
          ))}
        </div>
      </div>
    );
  }
}

【问题讨论】：

您的密码箱不工作
@PunchIn 你能展示你想要的OP吗
你说的是文章和单元格，在 html 中它显示颜色和 div，你能在 html 渲染中给出适当的变量名吗:)
@waqasMumtaz 沙盒链接已修复
@AkhilAravind 完成。更新了 html 渲染中的变量名称

标签： css reactjs dictionary setstate classname

【解决方案1】：

这是对上述 sn-p 的更新，@punch 这将帮助您Sandbox Link。如果您有任何问题，请仔细阅读并告诉我。

这是更新的组件

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const ArticlePreview = props => {
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.article}
    </div>
  );
};

const ArticleCells = props => {
  console.log(props.class);
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.cell}
    </div>
  );
};

const articles = ["Article 1", "Article 2", "Article 3", "Article 4"];
const cells = ["Cell 1", "Cell 2", "Cell 3", "Cell 4"];
const colors = [
  "bkcolorGreen",
  "bkcolorBlue",
  "bkcolorOrange",
  "bkcolorYellow"
];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: false,
      article: "",
      cell: "",
      class: ""
    };
  }

  onSelectArticle = article => {
    this.setState({
      selected: true,
      article: article
    });
  };

  onSelectCell = cell => {
    //cell.currentTarget.style.backgroundColor = "pink";
    cell.target.removeAttribute("class");
    cell.target.classList.add(colors[articles.indexOf(this.state.article)]);
    // var style = (cell.currentTarget.classList.add(colors[articles.indexOf(this.state.article)]) && this.state.cell === cell ? "bkcolor" : "default");
    this.setState({
      selected: true,
      cell: cell
      // class: { style }
    });
  };

  render() {
    return (
      <div>
        <div>
          {articles.map((article, index) => (
            <ArticlePreview
              key={index}
              class={
                this.state.selected && article === this.state.article
                  ? colors[articles.indexOf(this.state.article)]
                  : "default"
              }
              onClick={() => this.onSelectArticle(article)}
              article={article}
            />
          ))}
        </div>
        <br />
        <div>
          {cells.map((cell, index) => (
            <ArticleCells
              key={index}
              class={`${this.state.class}`}
              onClick={cell => this.onSelectCell(cell)}
              cell={cell}
            />
          ))}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

【讨论】：