Question

我正在尝试将函数从父级传递给子级，因此当有人单击子组件时，它将使用不同的组件进行切换。所以我所做的就是

class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {active: true};

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({active: !this.state.active});
  }

  render() {

    return (
      <div>
  if(this.state.active)
              {this.state.callerData.map((agent, i) => (
                <CompAltWidget compalt={compalt} key={i} handleClick={this.handleClick} />
              ))}
              else if(!this.state.active){this.state.callerData.map((agent, i) => (
                <compWidget comp={comp} key={i} handleClick={this.handleClick} />
              ))}
</div>
    );
  }
}

export default Comp;

和子组件：

class CompWidget extends Component {
  handleClick() {
    this.props.handleClick();
  }
render() {
    return (
      <div >
<div className="wrapper" onClick={this.props.handleClick()}>
                      <LineChart line1Data={this.props.comp} />
            </div>
          </div>
    );
  }
}

export default ComptWidget;

和CompWidget的第二个组件 - ＆gt; CompAltWidget。我得到的消息是Maximum update depth exceeded，但即使我按照以下解决方案ReactJS: Maximum update depth exceeded error并将<CompAltWidget compalt={compalt} key={i} handleClick={this.handleClick()} />更改为<CompAltWidget compalt={compalt} key={i} handleClick={this.handleClick} />，错误仍然会发生。有人能帮忙吗？感谢

Answer 1

你想写

<div className="wrapper" onClick={this.props.handleClick}>

在地图功能中超出最大更新深度

1 个答案: