根据子状态从子组件更改父组件的背景颜色答案

【问题标题】：Change background color of parent component from child component based on child state根据子状态从子组件更改父组件的背景颜色
【发布时间】：2018-02-25 01:38:56
【问题描述】：

我在父布局容器的 div 中的组件中有一个微调器。在我的子容器中，当数据加载时，我绘制了一个胜利图表。我让微调器运行，直到 ajax 获取数据并设置状态。我想根据状态更改父组件 div 的背景颜色，以便微调器位于与图表不同的颜色背景上。

在我的图表组件中它是这样工作的：

if(this.state.data){
        return (
            <div className="chart">
              ...
            </div>
          }else {
            return <div class="spinner></div>
          }

一切正常，但我还想做的是使用类似的东西设置父 div 的背景颜色：

if(this.state.data) {
  this.props.setParentBackgroundColor("#fff")

}

即使我创建了一个道具并传入了一个函数，它似乎也没有设置父级的背景颜色。有没有办法基于组件而不是通过点击或某些用户事件来做到这一点？

这是另一个版本的子组件切换幻灯片，在第四张幻灯片我要更改父背景：

import React, { Component } from 'react';
import { AdminLoginsChart } from './admin-logins-chart';

export class Slides extends Component {
render(){
if(this.props.slideNum === 0) {
    return (
        //<div>Slide 0</div>
        <AdminLoginsChart />
    );
} else if (this.props.slideNum === 1) {
    return <div>Slide 1</div>;
} else if (this.props.slideNum === 2) {
    return <div>Slide 2</div>
} else {
    this.props.ChangeParentStyle("fff"); // change the parent here
    return <div>Out of slides</div>;
}
};
}

// Parent Component has this:

class App extends Component {
constructor() {
    super();
    this.state = {
        interval: 8000,
        slideNum: 0,
        backgroundColor: '#ccc'
    };
}

ChangeParentStyle = (backgroundColor)=> {
    this.setState({
        backgroundColor: backgroundColor
    })
}

slide = () => {

        //increase by num 1, reset to 0 at 4
        if (this.state.slideNum === 0) {
            //slide 0;
            console.log("slide 0");
        } else if (this.state.slideNum === 1) {
            //slide 1;
            console.log("slide 1");
            this.setState({slideNum: 1})

        } else if (this.state.slideNum === 2) {
            //slide 2;
            console.log("slide 2");
            this.setState({slideNum: 2})
        }
        this.setState({slideNum :(this.state.slideNum + 1) % 4});

        //return this.state.slideNum;
    }


stopTimer = () => {
    clearInterval(this.intervalrefreshId);
}

componentDidMount() {
    this.intervalrefreshId = window.setInterval(this.slide, this.state.interval);
}
render() {
return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
    </div>
      <Chart style={{backgroundColor: this.state.backgroundColor}} >
            <Slides slideNum={this.state.slideNum} ChangeParentStyle={this.ChangeParentStyle.bind(this)}/>
          {/*<AdminLoginsChart data={this.state.data}/>*/}

      </Chart >


  </div>
);

【问题讨论】：

什么是“即使我创建一个道具并传入一个函数，它似乎也没有设置父级的背景颜色。”意思是？你能发布setParentBackgroundColor 的作用吗？听起来你有正确的方法，在父组件中创建函数来更新父组件的样式并将该函数作为道具传递给子组件。我需要查看更多代码才能理解您的问题。您可以发布父母和孩子的完整代码吗？
好的，感谢您的帮助。我在原始帖子中添加了更多代码。是否有意义？除了图表组件之外，还有更多事情要做。当幻灯片用完时，我也想这样做。
在此示例中，您在 Slides 组件中传递给 ChangeParentStyle 的十六进制代码前面缺少 #。除此之外，您的代码看起来不错。
我在父组件中设置状态以更改背景颜色仍然存在问题。它似乎引发了父子循环的无限渲染并导致内存溢出我尝试在 ComponentDidUpdate 事件中添加对 ChangeParentStyle 的调用，但我得到了这个：超过最大调用堆栈大小
这是一个 jsbin，显示了我正在尝试做的事情。当它到达幻灯片 3 时，它应该更改父背景颜色。 jsbin.com/mahocuq/edit?html,js,console,output

标签： javascript reactjs

【解决方案1】：

感谢 JSBin，我想我找到了你的问题：

Slide 组件中的这个方法：

componentWillUpdate() {
        if(this.props.slideNum === 2){
            this.changeStyle("#fff")
        }    
}

这个方法会在组件获得新的 props 时触发。您正在调用changeStyle，它调用ChangeParentStyle，然后更改this.state.background，并将其作为新道具传递给Slide 组件。幻灯片组件然后看到一个新的道具被传递下来，然后它再次调用该函数并一遍又一遍地重复。您需要在 componentWillUpdate 方法中对背景进行检查。

componentWillUpdate(nextProps) {
        if(this.props.slideNum === 2 && this.props.background !== nextProps.background){
            this.changeStyle("#fff")
        }    
}

所以现在，如果颜色不匹配，该函数只会尝试更新背景颜色。我不确定实际的逻辑应该是什么，但这应该可以帮助您使其正常工作。

【讨论】：