仅在一个特定按钮上打开模式

Question

我在React JS中有三个按钮，我希望其中两个打开外部链接，而一个将打开模式。我在弄清楚此逻辑并让模式和链接正常工作时遇到了一些麻烦。我认为这是我打电话给道具的方式，但始终坚持如何解决。我有一个可重复使用的按钮组件：

ButtonComponent.jsx

class ButtonComponent extends React.Component {
   handleClick(props) {
    if (props.text.includes('Modal Button')) {
      return (
        props.openModal
      );
    }
    props.history.push(props.link);
  }

render() {
    return (
            <div>
               <button onClick={() => this.handleClick(this.props)}>{this.props.text}</button>           
            </div>
    );
  }
}
}

这是我将使用按钮的组件ButtonRow.jsx

class ButtonRow extends React.Component {
  openModal() {
    return (
        <ReusableModal
            header={'Title'}
            content={'Content'}
            button={'Open link'}
        />
    );
  }

  render() {
    return (
        <div>
            <Container>
                    <ButtonComponent text={'Modal Button'} openModal={this.openModal()} />
                    <ButtonComponent text={'Link Button'} link={'google.com'} />
                    <ButtonComponent text={'Link Button'} link={'google.com'} />
            </Container>
        </div>
    );
  }
}

我还使用了已在其中写入了isOpen和isClosed状态的可重用模态组件。

Answer 1

据我观察，发现以下错误

1）仅使用（this.openModal）而不调用它

<ButtonComponent text={'Modal Button'} openModal={this.openModal} />

2）在此处调用openModal

handleClick(props) {
    if (props.text.includes('Modal Button')) {
      return (
        props.openModal()
      );
    }
    props.history.push(props.link);
  }