Css React JS：如何基于另一个元素的类名bgcolor样式更改一组div中一个div的bgcolor

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

通缉结果: 当用户单击其中一个项目以选择它时，用户应该能够点击一个或多个单元格，并应用与所选项目相同样式的bgcolor，如果未选择任何项目，则默认bgcolor将应用于项目和单元格元素

沙箱：

代码示例：

---

这是对上述代码段的更新，@punch This将帮助您。请检查一下，如果有任何问题请告诉我

这是更新的组件

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"));

---

您的代码沙盒不可用working@PunchIn你能展示你想要的OPYou文章和单元格吗？在html中它显示颜色和div，你能在html render中给出适当的变量名吗？@waqasumtaz sandbox linkfixed@AkhilAravind完成。更新了html呈现中的变量名称

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"));