Javascript 使用按钮映射时，如何通过子组件中的按钮显示/隐藏父组件中的组件？

有点口是心非的问题

我看过十几个类似的问题，但它们要么与同一文件中的组件有关，要么与单个按钮有关

想要的效果：
我试图在用户单击特定回购的卡片时显示存储库提交。在按下按钮之前，提交是隐藏的。如果用户在显示提交时单击按钮，则应隐藏提交。连续点击回购卡应显示/隐藏/显示/隐藏/等相应的提交卡

function Home() {
    const title = "Projects"
    const message = "Projects fetched from Github using their GQL API."
    const [clicked, setClicked] = useState(false)
    const [repoInfo, setRepoInfo] = useState({ name: "Website", owner: "FernandoH-G" })

    return (
        <Container>
            <Jumbo title={title} message={message} />
            <CardDeck>
                <RepoCards clicked={clicked} setClicked={setClicked} setRepoInfo={setRepoInfo} />
            </CardDeck>
            <br/>
            <CardDeck>
                {clicked && <CommitCards repoInfo={repoInfo} />}
            </CardDeck>
        </Container>
    );
}

函数Home（）{
const title=“项目”
const message=“使用GQL API从Github获取的项目。”
const[clicked，setClicked]=useState（false）
const[repoInfo，setRepoInfo]=useState（{名称：“网站”，所有者：“FernandoH-G}）
返回(


{单击&&}
);
}

功能卡（道具）{
const{loading，error，data}=useQuery（GET\u pinted\u REPOS）；
常量[radioValue，setRadioValue]=使用状态（“”）；
如果（正在加载）返回(
)
如果（错误）返回(
)
const pinEdges=data.user.pinnedItems.edges
返回(
pinEdges.map（（pin，idx）=>(
{pin.node.name}
{pin.node.description}
setRadioValue（e.currentTarget.value）}
onClick={（）=>{
log（`${idx}已单击卡片。单击值：${props.clicked}`）
props.setRepoInfo(
{
名称：pin.node.name，
所有者：pin.node.owner.login
})
props.setClicked（！clicked）//这应该可以用，对吗？
//if（radioValue==pin.node.name）{
////props.setClicked（prevVal=>！prevVal）
//props.setClicked（false）
//}否则{props.setClicked（true）}
}}>
上次更新：{'}
{parseDate（pin.node.pushedAt）}
))
)
}

我包含了CommitCards组件代码，尽管我认为没有必要

const CommitCards = (props) => {
    const name = props.repoInfo.name
    const owner = props.repoInfo.owner
    const { loading, error, data } = useQuery(GET_REPO_COMMITS, {
        variables: { name, owner },
    });
    if (loading) return (
        <Loading message={`Fetching ${name} commits...`} color="secondary" />
    );
    if (error) return (
        <Loading message={`Error fetching ${name} commits.`} color="danger" />
    );

    const commits = data.repository.defaultBranchRef.target.history.edges
    return commits.map(com => (
        <Card
            key={com.node.url}
            bg={"dark"}
            style={{ color: "white" }}
            border="info">
            <Card.Body>
                <Card.Link href={com.node.url}>
                    Commit Date:{'\n'}
                    {parseDate(com.node.committedDate)}
                </Card.Link>
                <Card.Text>
                    {parseText(com.node.message)}
                </Card.Text>
            </Card.Body>
        </Card>
    ))
}

const CommitCards=（道具）=>{
const name=props.repoInfo.name
const owner=props.repoInfo.owner
const{loading，error，data}=useQuery（GET_REPO_提交{
变量：{name，owner}，
});
如果（正在加载）返回(
);
如果（错误）返回(
);
const commits=data.repository.defaultbranchhref.target.history.edges
返回commits.map（com=>(
提交日期：{'\n'}
{parseDate（com.node.committedDate）}
{parseText（com.node.message）}
))
}

查看控制台并记录单击的状态后，可能会出现渲染问题。我之所以这样说，是因为它似乎将所有内容渲染了两次，从而影响了单击的价值

我不知道。这件事我已经谈了好几天了。下面是我单击每个按钮后控制台输出的屏幕截图。甚至没有表现出来；没有达到我想要的效果

巨大的发展 按照@deckele的建议，我正在做一个测试，这时我注意到我最初发布的代码…实际上是有效的，sorta。我肯定可以优化张贴的代码。我无法让react引导程序在代码沙箱中工作，但结果是更好了

结果是，

读取单击标签、文本部分，就像在控制台上单击两次一样。但是，您必须访问非常小的实际输入区域。您可以在代码沙盒中以单击方式签出注册的标签。

不幸的是，输入区域被标签覆盖了，标签实际上是整个按钮

---

由于这个问题发生了变化，我将结束这个问题，并且可能会打开一个新的react引导程序。

可能有更多的方法来实现这个功能

我想你不用在

主页中使用
点击的
状态就可以逃脱-如果我没有遗漏什么，我不知道你为什么需要它

你可以：

1.在
主页中

只保留
repoInfo
并删除
单击的

使用
null
或要加载到装载上的值启动
repoInfo
将
repoInfo
和
setRepoInfo
向下传递到
RepoCards
更改单击的
检查
reportInfo


函数Home（）{
const title=‘项目’；
const message='使用GQL API从Github获取的项目'；
常量[repoInfo，setRepoInfo]=useState({
名称：'网站'，
所有者：“FernandoH-G”，
})；//如果使用'null'启动repoInfo，则不会在mount中选择repo
返回(


{repoInfo&&}
);
}

2.在
RepoCards

扔掉
radioValue
——你不会使用它；您可以使用
repoInfo
从
ToggleButton
中删除
onClick
，只需使用
onChange
更改为

{
const newReportInfo=
props.reportInfo&&props.reportInfo.name
const CommitCards = (props) => {
    const name = props.repoInfo.name
    const owner = props.repoInfo.owner
    const { loading, error, data } = useQuery(GET_REPO_COMMITS, {
        variables: { name, owner },
    });
    if (loading) return (
        <Loading message={`Fetching ${name} commits...`} color="secondary" />
    );
    if (error) return (
        <Loading message={`Error fetching ${name} commits.`} color="danger" />
    );

    const commits = data.repository.defaultBranchRef.target.history.edges
    return commits.map(com => (
        <Card
            key={com.node.url}
            bg={"dark"}
            style={{ color: "white" }}
            border="info">
            <Card.Body>
                <Card.Link href={com.node.url}>
                    Commit Date:{'\n'}
                    {parseDate(com.node.committedDate)}
                </Card.Link>
                <Card.Text>
                    {parseText(com.node.message)}
                </Card.Text>
            </Card.Body>
        </Card>
    ))
}