Реагировать JS реагировать- bootstrap PopOver изменить цвет фона для другой кнопки, используя className

Question

У меня есть реагирующий js компонент, который имеет много кнопок, которые вызывают различные всплывающие сообщения, называемые всплывающей подсказкой. Мне нужно применить разные цвета фона для каждого popover-заголовка. Я добавил цвет в файл css и в своем коде jsx, каждый поповер вызывает функцию, чтобы получить соответствующий стиль цвета фона. Пока что раскраска не работает. Я вижу здесь других, использующих .popover-title в css, но это сделает все popover одинаковым цветом. Мне нужно применить разные цвета для каждой кнопки.

Любая помощь приветствуется. Спасибо

импорт стилей из 'cssFile'

CSS

:local .greenColor
  background-color: F990099
  color: #000000


JSX code

<Popover id="1" title="test title" className={this.getBackgroundColor()}>test</Popover>

// I have many of these Popover element. I like to call the getBackgroundColor function to get a specific styling 


getBackgroundColor = () => {
  return 'styles.greenColor';
}

Answer 1

вы можете сделать это следующим образом:

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

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: -1, color: "white", isOpen: false };
  }

  togglePopover = (e, _id, _color) => {
    if (_id !== this.state.id && this.state.isOpen) {
      this.setState({ isOpen: !this.state.isOpen }, function() {
        this.setState({ id: _id, color: _color, isOpen: !this.state.isOpen });
      });
    } else
      this.setState({ id: _id, color: _color, isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="App" style={{ margin: "50px" }}>
        <div>
          <Popover
            style={{ backgroundColor: this.state.color, color: "white" }}
            isOpen={this.state.isOpen && this.state.id === 1}
            body={<div className="Balloon">Popover Content</div>}
          >
            <button onClick={e => this.togglePopover(e, 1, "red")}>
              Toggle Popover
            </button>
          </Popover>
        </div>
        <br />
        <br />
        <div>
          <Popover
            style={{ backgroundColor: this.state.color }}
            isOpen={this.state.isOpen && this.state.id === 2}
            body={<div className="Balloon">Popover Content</div>}
          >
            <button onClick={e => this.togglePopover(e, 2, "yellow")}>
              Toggle Popover
            </button>
          </Popover>
        </div>
      </div>
    );
  }
}

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

также вы можете использовать функцию togglePopover в качестве метода наведения мыши, и она работает для любого числа Popover без необходимости изменять внутренний код

Вывод ответа: ЗДЕСЬ