onClick импорт css не работает должным образом в reactjs - PullRequest
Новая
       23

onClick импорт css не работает должным образом в reactjs

0 голосов
/ 03 февраля 2020

У меня есть 2 компонента в моем приложении для реагирования: App и Navbar. Я пытаюсь динамически загрузить css (4 разные темы из bootswatch) по щелчку пользователя (коротко)

Ниже приведены Компоненты:

Приложение. js

class App extends Component {
  state = {};
  availableThemes = ["lux", "sketchy", "flatly", "darkly"];

  constructor() {
    super();
    this.changeTheme("flatly");
    ReactDOM.findDOMNode;
  }

  changeTheme = themeName => {
    console.log("Theme", themeName);
    if (this.availableThemes.indexOf(themeName) < 0) {
      alert("Theme not available");
    } else {
      import(`./themes/${themeName}/bootstrap.min.css`)
        .then(() => {
          console.log("Theme loaded", themeName);
        })
        .catch(() => {});
    }
  };

  render() {
    return (
      <NavBar
        themesList={this.availableThemes}
        onThemeChange={this.changeTheme}
      />
    );
  }
}

Navbar.jsx: 

class NavBar extends Component {
  state = {};
  render() {
    const { themesList, onThemeChange } = this.props;

    return (
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand>WiLite</Navbar.Brand>
        <Navbar.Collapse style={{ paddingLeft: 25 + "%" }}>
          <Form inline>
            <FormGroup>
              <FormControl
                type="text"
                placeholder="Search"
                className="mr-sm-2"
              />
              <Button variant="outline-light">Search</Button>
            </FormGroup>
          </Form>
          <Nav>
            <NavDropdown title="Theme">
              {themesList.map(theme => {
                return (
                  <NavDropdown.Item
                    key={v4()}
                    onClick={() => {
                      onThemeChange(theme);
                    }}
                  >
                    {theme}
                  </NavDropdown.Item>
                );
              })}
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

Теперь вывод changeTheme очень случайный. Иногда тема применяется, иногда нет, а иногда я получаю смесь обеих тем (ту, которую я запросил, и ту, которая уже была загружена).

Может кто-нибудь предложить, пожалуйста, как я могу выполнить sh это?

...