javascript - 当我在另一个组件中时如何更改 CSS 属性？

Question

我正在尝试为我的 Web 应用程序构建一个暗模式，单击该模式会将背景颜色从黑色变为白色，将白色变为黑色。

我有一个用于此暗模式的按钮，单击该按钮会执行以下操作：

1) 调用一个方法来更新我的状态并更改布尔值，该值进一步更改我的类名，无论是亮模式还是暗模式 2) 基于类名我有一组特定的样式，可以将背景颜色设置为黑色或白色。

到目前为止我做了什么：

1）我为更改模式创建的按钮位于名为“Header.js”的组件中。2）在 Header 组件中，我还有其他内容，例如标题和表单。我正在将我的“Header.js”组件渲染到我的“cardlist.js”组件。3) Cardlist组件包含我的各种“卡通人物”卡片

问题是什么：

我要更改的样式在卡片列表组件中，但我在 Header 组件中有我的按钮。那么我可以访问这些类名吗？

我的卡片列表组件：

import React from "react";
import axios from "axios";
import Card from "./Card";
import Header from "./Header";
import "./Styles/CardList.scss";

class CardList extends React.Component {
  state = {
    // url: `https://rickandmortyapi.com/api/character/${[...Array(494).keys()]}`,
    character: [],
    typedValue: ""
  };

  async componentDidMount() {
    //const res = await axios.get(this.state.url);
    const ids = Array(493)
      .fill(null)
      .map((_, idx) => idx + 1)
      .join(","); // '1,2,3...,300'
    const url = `https://rickandmortyapi.com/api/character/[${ids}]`;
    const res = await axios.get(url);

    this.setState({
      character: res.data
    });
  }

  handleChange = e => {
    e.preventDefault();
    let typedValue = e.target.value;
    this.setState({ typedValue });
  };

  render() {
    const character = this.state.character;
    const typedValue = this.state.typedValue;
    let filter = character.filter(char => char.name.includes(typedValue));

    return (
      <div className="body-container">
        <Header />
        <div className="form-container">
          <form>
            <input
              type="text"
              name="title"
              placeholder="Search Characters"
              onChange={this.handleChange}
            />
          </form>
        </div>

        <div className="cardlist-container">
          {filter.map(character => (
            <Card
              key={character.id}
              imgURL={character.image}
              id={character.id}
              name={character.name}
              status={character.status}
              species={character.species}
              type={character.type ? character.type : "Not Known"}
            />
          ))}
        </div>
      </div>
    );
  }
}

export default CardList;

我的页眉组件

import React from "react";
import "./Styles/Header.scss";
import DarkMode from "./DarkMode";

class Header extends React.Component {
  state = {
    setClass: !JSON.parse(localStorage.getItem("Mode"))
  };

  handleChange = () => {
    this.setState({
      setClass: !this.state.setClass
    });
  };

  render() {
    localStorage.setItem("Mode", !this.state.setClass);
    let toggle = JSON.parse(localStorage.getItem("Mode"));
    console.log(toggle);

    return (
      <div className="header-container">
        <div className="button-container">
          <div className="button-holder">
            {/* <button className="actual-button">DARK/LIGHT</button> */}
            <div className={toggle ? "dark-mode" : "light-mode"}>
              <button className="actual-button" onClick={this.handleChange}>
                DARK/LIGHT
              </button>
            </div>
          </div>
        </div>
        <div className="heading__main">Rick and Morty Database</div>
      </div>
    );
  }
}

export default Header;

标签： javascriptreactjs