React native 单击按钮加载组件并将数据传递给它

我有一张卡，我想在单击该卡时显示一个新的

组件

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

以下是我希望在单击时显示的组件：

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

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

export default NewsDetail

import React，{useState，useffect}来自“React”
从“./App”导入应用程序
类NewsDetail扩展了React.Component{
render（）{
打招呼
}
}
导出默认新闻详细信息

这是我的名片：

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>
  )

showDetails=（）=>{
返回
}
返回(
showDetails（）}>
{newsttitle}
{新闻摘要}
{toLocalTime（publishedAt）}
openArticleUrl（articleUrl）}>
{sourceName}
)

---

提前感谢。

您应该使用类似于

react导航的功能来在组件（屏幕）之间导航。
检查您是否想要
好的，因此如果您想要在卡所在的线路上显示组件。您可以只使用组件进行隐藏/显示。所以这里我要做的是在状态中获取一个值，并根据显示将其值更改为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>
`

`const[displayStatus，setDisplayStatus]=useState（false）`
`
setDisplayStatus（真）}>
{newsttitle}
{新闻摘要}
{toLocalTime（publishedAt）}
openArticleUrl（articleUrl）}>
{sourceName}
{
显示状态&&
}
`
首先，从概念上讲，这不是做你想做的事情的最佳方式

您不想将arrow func传递给卡的
onClick
相反，请定义一个类似于
onCardClick
的方法，您可以在其中执行
this.setState（{isNewsDetailsVisible:true}）
然后，您可以在卡的
render
方法中编写类似
this.state.isNewsDetailsVisible&
的内容。更好的方法是定义一个方法
renderNewDetails
，并在其中检查状态值
然后，如果您想了解当前行为，只需返回JSX表单
onClick
handler-您不能用这种结构呈现任何内容。如果希望显示某些内容，则需要直接或通过
renderSomeContent
等方法将其放入渲染方法中

然后，如果我们假设我们有很多卡片，并且希望将其数据传递到某个地方，那么您需要了解您需要这些数据的位置。如果它需要在子组件中可用，您可以通过道具传递它。如果它是父组件，然后你可以将一些处理程序传递给你的
卡
组件，比如
onCardClick
，它将接受一些
数据
参数。
我将使用路由器流量加载所需的查看页面。你能给我一些例子吗？你到底想做什么？我想在按钮上加载一个不同的组件，然后单击将一些数据传递给该组件。我不想在同一路线上显示/隐藏该组件。我想在单击按钮时加载一个新组件。然后你可以做的是我将组件放在哪里。用你的函数替换它<代码>显示详细信息（）