[英]Update child prop when state changes through parent
I have a parent state which has a 'Theme' state.我有一个父 state,它有一个“主题”state。
Basically, this is the layout thus far.基本上,这是迄今为止的布局。
Parent Component carries state of Theme. Parent Component 带有 Theme 的 state。
Parent passes down current state to child component as "theme" prop using code "theme={this.state.theme}".父级使用代码“theme={this.state.theme}”将当前 state 作为“主题”道具传递给子组件。
Trying to style child element inline with尝试将子元素设置为内联样式
style={{ background: props.theme === "light"? "#fff": "#000" }}
The problem is though, when the parent component state changes, the child component does NOT update.问题是,当父组件 state 更改时,子组件不会更新。 I console log the parent state when a toggle button is pressed to change the state between light/dark.
当按下切换按钮以在亮/暗之间更改 state 时,我控制台记录父 state。 The parent state updates fine, but the inline style does not change.
父 state 更新正常,但内联样式没有改变。 Indicating that the child component is locked into whatever state is current when the page loads.
指示子组件在页面加载时被锁定到当前的 state 中。
For eg, if the default state is 'Dark', the child component will be stuck on 'Dark'.例如,如果默认 state 为“Dark”,则子组件将卡在“Dark”上。 If I TOGGLE the parent state to 'Light', the child component will remain on 'Dark'.
如果我将父 state 切换为“Light”,则子组件将保持“Dark”。
Is there any reason for this?这有什么原因吗?
I am new to react so sorry if this is a noob question!如果这是一个菜鸟问题,我很抱歉!
Parent家长
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;
Child孩子
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;
The prop is selectedTheme
道具被
selectedTheme
主题
<TweetArea selectedTheme={this.state.theme} />
You have used props.theme
it should be props.selectedTheme
你已经使用
props.theme
它应该是props.selectedTheme
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.