Question

我在一个组件中有一个微调器，它位于父布局容器的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")

}

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

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

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>
);

Answer 1

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

Slide组件中的此方法：

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

此方法将在组件获取新道具时随时触发。您正在呼叫changeStyle，呼叫ChangeParentStyle然后更改this.state.background并将其作为新支柱传递给Slide组件。然后滑动组件看到新的道具向下传递，然后它再次调用该函数并反复重复。您需要在componentWillUpdate方法中对背景进行检查。

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

现在，如果颜色不匹配，该函数将仅尝试更新背景颜色。我不确定实际逻辑应该是什么，但这应该可以帮助你实现它。

根据子状态

1 个答案: