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

Question

我有一个父状态，它有一个“主题”状态。

尝试将子元素的样式内联到

style={{background:props.theme===“light”？“#fff”：“#000”}}

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

这有什么原因吗？

我是新反应，所以很抱歉，如果这是一个愚蠢的问题！

家长

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