尝试在渲染器外部渲染弹出窗口：React Js

Question

我正在尝试通过点击相应链接来弹出弹出窗口。在这里，我可以看到onClick与状态更改一起被触发，但是没有模态出现。

有人可以告诉我我做错了什么。我正在为相同的目的使用语义UI反应模式]

沙盒：https://codesandbox.io/s/semantic-ui-example-seg91?file=/Modal.js

import React from "react";
import Modal from "./Modal";

class LoaderExampleText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false
    };
  }

  setModal = (e, value) => {
    console.log(value);
    e.stopPropagation();
    this.setState({ isModalOpen: true });
    return (
      <Modal
        modalOpen={this.state.isModalOpen}
        handleClose={() => {
          this.setState({ isModalOpen: false });
        }}
        items={value}
      />
    );
  };
  render() {
    return (
      <>
        <a onClick={e => this.setModal(e, "first item")}>Modal A</a>
        <a onClick={e => this.setModal(e, "second Item")}>Modal B</a>
      </>
    );
  }
}
export default LoaderExampleText;

import * as React from "react";
import { Modal } from "semantic-ui-react";

class NestedTableViewer extends React.Component {
  render() {
    return (
      <>
        <Modal closeIcon={true} open={this.props.modalOpen}>
          <Modal.Header>Modal</Modal.Header>
          <Modal.Content>
            <h1> {this.props.items}</h1>
          </Modal.Content>
        </Modal>
      </>
    );
  }
}

export default NestedTableViewer;