reactjs - 替换 React 组件 onClick

Question

我有一个组件，在主屏幕上有一个按钮容器，我不知道如何进行条件渲染。

APP.js

  constructor(props) {
    super(props);
    this.state = {
      showComponent: false,
    };
  }

... 
 render() {
    return (
{
  !this.state.showComponent ? (
    <div className="button_wrapper">
      <>
        <button
          className="upload_button"
          onClick={this.setState({ showComponent: true })}
        >
          {" "}
          {i18next.t("GENERAL.uploadBill")}
        </button>

        <p className="or_txt"> {i18next.t("GENERAL.or")}</p>
        <button className="manual_button">
          {" "}
          {i18next.t("GENERAL.fillManually")}
        </button>
      </>
    </div>
  ) : (
    <>
      <ComponentToShow />
    </>
  );
}

这个想法是，状态showComponent最初设置为false条件语句内的按钮的 onclick，具有当前按钮的容器应替换为新组件。但是，我不确定这个条件是否应该用这个 onClick 事件包装按钮。有没有更有效的方法来做到这一点，而不必为按钮区域创建单独的组件？

标签： reactjs