javascript - React 不会更新作为 props 传递的组件的 props
问题描述
我有一个看起来像这样的 React DOM:
在MarketDepthWindow
's state 我有一个isBackgroundEnabled
我想作为道具传递给AskOrdersTab
. 但它只传递初始道具而不是更新。它应该在MarketDepthHeaderComponent
单击按钮时更新。
我认为问题在于我将它作为道具传递给TabsContainer
.
我尝试更改React.Component
为React.PureComponent
,使用shouldComponentUpdate()
,添加React.cloneElement
和传递道具,TabsContainer
但对我没有任何作用。
也许我犯了某种架构错误?也许我应该以某种方式使用 refs?
class AskOrdersTab extends React.Component {
render() {
return <div>bids</div>
}
}
class BidOrdersTab extends React.Component {
render() {
return <div>asks</div>
}
}
class MarketDepthHeaderComponent extends React.Component {
render() {
return <button class={this.props.isBackgroundEnabled ? 'active' : ''} onClick={this.props.handleBackgroundButtonClick}></button>
}
}
class TabsContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
tabs: props.tabs.tabs || [],
tabHeaderComponent: props.tabs.tabHeaderComponent || ''
}
}
renderComponents() {
let tabsComponents = [];
for (let tab of this.state.tabs.length) {
tabsComponents.push(
<div>{tab.component}</div>
)
}
return tabsComponents;
}
render() {
return (
<>
{this.state.tabHeaderComponent}
{this.renderComponents()}
</>
);
}
}
class MarketDepthWindow extends React.Component {
handleBackgroundButtonClick = (event) => {
this.setState((prevState) => ({
isBackgroundEnabled: !prevState.isBackgroundEnabled
}))
}
constructor(props) {
super(props)
this.state = {
isBackgroundEnabled: true,
handleBackgroundButtonClick: this.handleBackgroundButtonClick
}
}
render() {
let tabsProps = {
tabs: [
{ title: 'Bid', component: <BidOrdersTab {...this.state} /> },
{ title: 'Ask', component: <AskOrdersTab {...this.state} /> }
],
tabHeaderComponent: <MarketDepthHeaderComponent {...this.state} />
}
return <TabsContainer tabs={tabsProps} isBackgroundEnabled={this.state.isBackgroundEnabled} />
}
}
ReactDOM.render(
<MarketDepthWindow />,
document.getElementById("market-depth-window")
);
解决方案
TabsContainer 中的状态是多余的,您应该避免在每个组件中存储状态,因为它会切断更新链,请尝试使用 props 代替。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class AskOrdersTab extends React.Component {
render() {
return <div>bids</div>;
}
}
class BidOrdersTab extends React.Component {
render() {
return <div>asks</div>;
}
}
class MarketDepthHeaderComponent extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>
{this.props.isBackgroundEnabled ? "enabled" : "disabled"}
</button>
);
}
}
class TabsContainer extends React.Component {
renderComponents() {
let tabsComponents = [];
for (let tab of this.props.tabs.tabs) {
tabsComponents.push(<div key={tab.title}>{tab.component}</div>);
}
return tabsComponents;
}
render() {
return (
<>
{this.props.tabs.tabHeaderComponent}
{this.renderComponents()}
</>
);
}
}
class MarketDepthWindow extends React.Component {
constructor(props) {
super(props);
this.state = {
isBackgroundEnabled: true
};
}
handleBackgroundButtonClick = () => {
this.setState({
isBackgroundEnabled: !this.state.isBackgroundEnabled
});
};
render() {
let tabsProps = {
tabs: [
{ title: "Bid", component: <BidOrdersTab {...this.state} /> },
{ title: "Ask", component: <AskOrdersTab {...this.state} /> }
],
tabHeaderComponent: (
<MarketDepthHeaderComponent
onClick={this.handleBackgroundButtonClick}
isBackgroundEnabled={this.state.isBackgroundEnabled}
/>
)
};
return (
<TabsContainer
tabs={tabsProps}
isBackgroundEnabled={this.state.isBackgroundEnabled}
/>
);
}
}
const rootElement = document.getElementById("market-depth-window");
ReactDOM.render(<MarketDepthWindow />, rootElement);
这是您的演示,您可以检查修复并确保它有效。祝你好运
推荐阅读
- firebase - 无法添加颤振包flutter_facebook_login:^3.0.0,在调试模式下,应用程序被安装并立即关闭
- excel - 使用过滤器功能时如何排除带有空白单元格的列?
- apollo - 用于测试 graphql 错误的查询不再有模拟响应
- json - 如何按属性获取最多 n 个项目并在 JSON 中排序
- reactjs - 我应该在 useEffect 挂钩还是在 action-creator-thunk 中运行异步代码
- node.js - 使用nodejs和angular中的ffmpeg将视频转换为mp3格式,然后将转换后的音频保存到数据库(mongodb)
- python - 所有日期时间字段都加了 7 小时
- python - 将 LED 灯带映射到灯带长度和高度不同的矩阵
- php - laravel 中的这些参数在哪里以及如何设置?`LARAVEL_LOAD_HOST`、`LARAVEL_LOAD_PORT`、`LARAVEL_LOAD_USER`?
- python - heroku procfile 问题:ModuleNotFoundError: No module named 'css_website.wsgi'