react-native - 在按钮单击时加载组件并将数据传递给它

Question

我有一张卡片，我想在component点击卡片时显示一张新卡片，并将点击卡片的数据传递给该新组件。当我点击卡片时，什么也没有发生，它甚至不会在控制台上抛出错误。

这是我想在点击时显示的组件：

import React, { useState, useEffect } from 'react'
import App from './App'

class NewsDetail extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

export default NewsDetail

这是我的名片：

showDetails = () => {
    return <NewsDetail/>
  }

  return (
    <Card className={classes.card}>
      <CardActionArea
        className={classes.cardActionsArea}
        onClick={() => showDetails()}>
        <CardMedia component="img" height="140" image={checkedImgUrl(imgUrl)} />
        <CardContent>
          <Typography gutterBottom variant="h6" component="h6">
            {newsTitle}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {newsSummary}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.cardActions}>
        <Typography className={classes.toLocalTime} variant="caption" color="primary" component="p">
          {toLocalTime(publishedAt)}
        </Typography>
        <Button size="small" color="primary" onClick={() => openArticleUrl(articleUrl)}>
          {sourceName}
        </Button>
      </CardActions>
    </Card>
  )

提前致谢。

标签： react-native

Answer 1

好吧，如果你想在卡片所在的路线上显示组件。您可以对组件进行隐藏/显示。所以在这里我要做的是在 state 中取一个值并根据显示将其值更改为 true 或 false

`const [displayStatus, setDisplayStatus] = useState(false)`
`
<div>
<Card className={classes.card}>
      <CardActionArea
        className={classes.cardActionsArea}
        onClick={() => setDisplayStatus(true)}>
        <CardMedia component="img" height="140" image={checkedImgUrl(imgUrl)} />
        <CardContent>
          <Typography gutterBottom variant="h6" component="h6">
            {newsTitle}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {newsSummary}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions className={classes.cardActions}>
        <Typography className={classes.toLocalTime} variant="caption" color="primary" component="p">
          {toLocalTime(publishedAt)}
        </Typography>
        <Button size="small" color="primary" onClick={() => openArticleUrl(articleUrl)}>
          {sourceName}
        </Button>
      </CardActions>
    </Card>
{
displayStatus && <NewsDetail/>
}
</div>
`