Typescript 通过在组件之间传递状态来关闭模态

当前，当在ListGroup.tsx中单击ListItem时，我有一个打开的模式，但是当我试图将模式的状态传递给我的TestGroup组件以关闭模式时，它不会执行预期的行为

我的想法是在TestGroup.tsx中单击关闭按钮后呈现ListGroup.tsx，但我不确定这是否有意义。与

this.props.onUpdate模式相同（false）
应该关闭模态，除非我遗漏了什么

提供的所有代码都是片段，不是完整的代码

这是我的ListGroup.tsx

interface IProps {
  onUpdateModal: typeof UpdateModal;
  showModalState: boolean;
}

export class ListGroup extends React.Component<IProps> {
  public render() {
    return (
      <div>
        <ul
          className="list-group"
          style={{
            display: "inline-block",
            marginTop: "20px"
          }}
        >
          {filterTest.map(filterTest => (
            <li
              key={filterTest.companyPN + "-" + filterTest.rev}
              className="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              onClick={() => {
                this.props.onUpdateSelectedTest(filterTest);
                this.props.onUpdateModal(true);
              }}
            >
              {filterTest.companyPN}: {filterTest.description}
            </li>
          ))}
        </ul>
        {/* Show the modal if showModal is true */}
        {this.props.showModalState && (
          <TestGroup
            onUpdateModal={this.props.onUpdateModal}
            showModalState={this.props.showModalState}
          />
        )}
      </div>
    );
  }
}

interface IProps {

  onUpdateModal: typeof UpdateModal;
  showModalState: boolean;
}

export class WedgeGroup extends React.Component<IProps> {
  public render() {
    return (
      <div>
        <div className="modal" style={{ display: "inline-block" }}>
          <div className="modal-dialog" role="document">
            {selectedtest.map(selecttest => (
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title">test</h5>
                  <button
                    onClick={() => {
                      this.props.onUpdateModal(false);
                    }}
                    type="button"
                    className="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>

                <div className="modal-body">
                  <p>{selecttest.description}</p>
                </div>
                {/* Close the modal if showModal is false */}
                <div className="modal-footer">
                  <button
                    onClick={() => {
                      this.props.onUpdateModal(false);
                    }}
                    type="button"
                    className="btn btn-secondary"
                    data-dismiss="modal"
                  >
                    Close
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default TestGroup;

这是我的ModalActions.ts

import { SHOW_MODAL, ModalActionTypes } from "./ModalTypes";

export function UpdateModal(modal: boolean): ModalActionTypes {
  return {
    type: SHOW_MODAL,
    payload: modal
  };
}

这是我的ModalTypes.ts

export const SHOW_MODAL = "SHOW_MODAL";

interface ShowModal {
  type: typeof SHOW_MODAL;
  payload: boolean;
}

export type ModalActionTypes = ShowModal;

我添加了另一个操作来隐藏模式，它解决了问题。
我添加了另一个操作来隐藏模式，它解决了问题。
您确定从reduxstate获得的
showModalState
中的值正确吗。尝试控制台。记录它是的，我得到了正确的值。当我第一次打开模式时，状态更新为true。当我关闭模式时，状态更新为false。您确定从reduxstate获得的
showModalState
中的值正确吗。尝试控制台。记录它是的，我得到了正确的值。当我第一次打开模式时，状态更新为true。当我关闭模式时，状态更新为false。
export const SHOW_MODAL = "SHOW_MODAL";

interface ShowModal {
  type: typeof SHOW_MODAL;
  payload: boolean;
}

export type ModalActionTypes = ShowModal;