有没有办法在 React 类组件中使用 Modal

Question

单击模态框后，我正在尝试呈现单个草稿，而不是导航到其他组件...如果这有意义...我要显示它，但是由于链接，它会重定向我。但是如果我不添加链接，那么我会在 url 上丢失我的 draftId

这是我的代码的一部分

class Drafts extends React.Component {
  componentDidMount() {
    this.props.fetchAllDrafts()
  }

  render() {
    const drafts = this.props.drafts

    return (
      <React.Fragment>
        <Table aria-label="a dense table" className="myaccount-table">
          <TableHead>
            <TableRow>
              <TableCell align="center">
                <div className="date-content">Date</div>
              </TableCell>
              <TableCell align="center">Content</TableCell>
              <TableCell> </TableCell>
              <TableCell> </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {drafts.map((draft) => (
              <TableRow key={draft.id}>
                <TableCell>
                  <div className="datecontent">{draft.createdAt}</div>
                </TableCell>
                <TableCell>
                  <div className="content">{draft.content} </div>
                </TableCell>
                <TableCell>
                  <Link to={`/drafts/${draft.id}`}>
                    <Popup
                      trigger={<button className="button"> Read </button>}
                      modal
                      nested
                    >
                      <SingleDraft />
                      {/* <Button color="primary">
                        Read
                      </Button> */}
                    </Popup>
                  </Link>

来自另一个类组件

class SingleDraft extends React.Component {
  constructor() {
    super()
  }

  componentDidMount() {
    this.props.fetchDraft(this.props.match.params.draftId)
  }

  render() {
    return (
      <div>
        <p>{this.props.singleDraft.content} </p>
        <Link to={`/texteditor/${this.props.singleDraft.id}`}>
          <button>Update</button>
        </Link>
      </div>
    )
  }

Answer 1

为什么不将draftId 作为道具传递？

<Popup
    trigger={<button className="button"> Read </button>}
    modal
    nested
>
    <SingleDraft draftId={draft.id} />
    {/* <Button color="primary">Read</Button> */}
</Popup>

在你的组件中。

componentDidMount() {
    this.props.fetchDraft(this.props.draftId)
}