Question

我有一个具有“主题”状态的父状态。

基本上，这是迄今为止的布局。

Parent Component 承载 Theme 的状态。

父组件使用代码“theme={this.state.theme}”将当前状态作为“theme”属性传递给子组件。

尝试内联设置子元素的样式

style={{ background: props.theme === "light" ? "#fff" : "#000" }}

问题是，当父组件状态改变时，子组件不会更新。当按下切换按钮以在明/暗之间更改状态时，我控制台会记录父状态。父状态更新正常，但内联样式不会改变。指示子组件在页面加载时被锁定为当前状态。

例如，如果默认状态为“Dark”，则子组件将卡在“Dark”上。如果我将父状态切换为“Light”，则子组件将保持“Dark”。

有什么原因吗？

如果这是一个菜鸟问题，我是新手，很抱歉！

家长

import React, { useState } from "react";
import "./App.scss";
import TweetArea from "./components/TweetArea";
import SwitchTheme from "./components/SwitchTheme";
import Header from "./components/Header";
import html2canvas from "html2canvas";
import { render } from "@testing-library/react";

function screenshot() {
  html2canvas(document.querySelector("#tweetHere")).then((canvas) => {
    document.body.appendChild(canvas);
  });
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: "light",
    };
  }

  toggleTheme = (props) => {
    this.setState({ theme: this.state.theme === "light" ? "dark" : "light" });
    console.log(this.state.theme);
  };

  themeSwitcher = () => {
    const selectedTheme = this.state.theme === "dark" ? "dark" : "";
    if (selectedTheme === "dark") {
      document.getElementByClass("tweetArea").style.background = "blue";
    }

    console.log("It ran");
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.toggleTheme}>Toggle</button>
        <SwitchTheme theme={this.state.theme} />
        <Header />
        <TweetArea selectedTheme={this.state.theme} />
      </div>
    );
  }
}
export default App;

孩子

import React, { useState } from "react";
import Tweet from "./Tweet";
import TweetUsername from "./TweetUsername";
import TweetTitle from "./TweetTitle";
import TweetTime from "./TweetTime";
import TweetData from "./TweetData";

const TweetArea = (props) => {
  const [TweetValue, setTweetValue] = useState("");
  const TweetHandler = (e) => {
    setTweetValue(e.target.value);
  };

  const [UsernameValue, setUsernameValue] = useState("");
  const UsernameHandler = (e) => {
    setUsernameValue(e.target.value);
  };

  const [TitleValue, setTitleValue] = useState("");
  const TitleHandler = (e) => {
    setTitleValue(e.target.value);
  };

  const [RetweetValue, setRetweetValue] = useState("");
  const RetweetHandler = (e) => {
    setRetweetValue(e.target.value);
  };

  return (
    <div class="tweetArea" style={{ background: props.selectedTheme }}>
      <div class="innerContainer">
        <div className="inputArea">
          <div class="tweetInput_tweet">
            <h5>Enter your Tweet</h5>
            <input type="text" class="onTweet" onChange={TweetHandler} />
          </div>
          <div class="tweetInput_username">
            <h5>What is the username</h5>
            <input type="text" onChange={UsernameHandler} />
          </div>
          <div class="tweetInput_title">
            <h5>What is the title</h5>
            <input type="text" onChange={TitleHandler} />
          </div>

          <div class="tweetInput_retweet">
            <h5>What is the retweet count</h5>
            <input type="text" onChange={RetweetHandler} />
          </div>
        </div>
        <div
          class="tweet"
          id="tweetHere"
          style={{ background: props.theme === "light" ? "#fff" : "#000" }}
        >
          <div class="tweet_header">
            <div class="tweet_avatar">
              <img
                src="https://via.placeholder.com/50"
                alt="avatar"
                class="avatar"
              />
            </div>
            <div class="tweet_person">
              <TweetTitle TitleValue={TitleValue} />
              <TweetUsername UsernameValue={UsernameValue} />
            </div>
          </div>

          <Tweet TweetValue={TweetValue} />
          <TweetTime />
          <TweetData RetweetValue={RetweetValue} />
        </div>
      </div>
    </div>
  );
};

export default TweetArea;

Answer 1

道具是selectedTheme

<TweetArea selectedTheme={this.state.theme} />

您使用过 props.theme 应该是 props.selectedTheme

当状态通过父级改变时更新子道具

1 个答案: